3
イメージスライダが機能しないようですが、これをページのヘッダーとして使用しようとしていますが、イメージはスライドしません。私はクロムの接頭辞を試しましたが、違いはありませんでした。@keyframesはスライドショーでは機能しません
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<div class ="slider">
<figure>
<img src="slider-test-image-1.jpg" >
<img src="slider-test-image-2.jpg" >
</figure>
</div>
<body>
</body>
<html>
これは、あなたが@-webkit-keyframesと-webkit-animationのみを設定しているCSS
.slider{
margin:0 auto;
padding:0;
overflow: hidden;
position:relative;
}
.slider figure{
margin:0 auto;
padding: 0;
width:200%;
-webkit-animation: 5s slidy infinate;
position:relative;
left:0;
}
.slider figure img{
margin:0 auto;
padding: 0;
overflow: hidden;
float:left;
width:50%;
position:relative;
}
@-webkit-keyframes slidy{
0%{
-webkit-left:0%;
}
45%{
-webkit-left:0%;
}
50%{
-webkit-left:-100%;
}
100%{
-webkit-left:-100%;
}
}