Q&A
コードを追記してください。
右から左に画像がループするという単純なコードを書きました。chromeで見ると大成功でした。しかしedgeだと、リロードボタンを押さないとアニメーションが開始しません涙
今まで行った対策ですが、edge用にペンダープレフィックスを付加してもダメで、HTMLの中に<meta http-equiv="X-UA-Compatible" content="IE=edge">のようなタグを入れましたがダメでした。何か原因があるのでしょうか。教えて頂ける方おねがいします。
ありがとうございます、すみませんでした。
【html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像が右から左にループ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>LOOP</header>
<div class="wrap">
<img src="images/show1920.png"><img src="images/show1920.png"><img src="images/show1920.png">
</div><!--wrap-->
</body>
</html>
【css】
/*=====================
ボデイ
======================*/
body{
width: 100%;
}
/*=====================
ヘッダー
======================*/
header{
background-color: navy;
color: white;
font-weight: bold;
font-size:1.3em ;
text-align: center;
line-height: 1.5em;
padding: 0.5em 0;
}
/*=====================
.wrap
======================*/
.wrap{
width:100%;
height:200px;
overflow: hidden;
display: flex;
}
/*=====================
.wrap img
======================*/
.wrap img{
height: 100%;
}
.wrap img:nth-of-type(1){
animation:loop infinite 30s -20s linear ;
}
.wrap img:nth-of-type(2){
animation:loop2 infinite 30s -10s linear ;
}
.wrap img:nth-of-type(3){
animation:loop3 infinite 30s linear ;
}
/*=====================
@keyframes
======================*/
@keyframes loop{
from{
transform: translateX(200%);
}
to{
transform: translateX(-100%);
}
}
@keyframes loop2{
from{
transform: translateX(100%);
}
to{
transform: translateX(-200%);
}
}
@keyframes loop3{
from{
transform: translateX(0%);
}
to{
transform: translateX(-300%);
}
}
※ちなみにedgeはリロードしなくてもたまに動いたりもします。動かない時もあるという形です。Googleは常に動いてくれます。
キャッシュをクリアしてハードリフレッシュをしてもそのような状態です。宜しくお願いします。
あなたの回答
tips
プレビュー
