анимированный фото баннер сбрасывает вместо повторения первого изображения css
Я получил этот баннер из учебника, но дело в том, что вместо баннера, продолжающегося в циклах, он вместо этого сбрасывается. Я не хочу использовать javascript, так как мы еще не справляемся с этим в uni. Может ли кто-нибудь указать, где я ошибся и как это исправить? Благодарю.
и это код, который я использовал
HTML:
<div class="photobanner">
<img class="first" src="images/scroll/ban.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner1.png" style="width:350px;height:233px;"/>
<img src="images/scroll/banner3.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner4.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner5.jpg" style="width:350px;height:233px;"/>
</div>
</div>
CSS:
/*body and container*/
* {
margin: 0;
padding: 0;
}
body {
background-image:url(images/banner1takuya.jpg);
background-size: cover;
background-attachment: fixed;
}
#container {
width:865px;
height:auto;
margin:auto;
padding:0 0 30px 0;
background-image:url(images/bg.png);
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
У вас ширина ширины.photobanner установлена равной 3550px, но сумма ширины изображений равна 355 * 5 = 1775px.
Вам нужно добавить еще 5 изображений одинакового размера, и это будет работать правильно.