没有比动画延迟,这在开始时使用CSS3其他迭代之间的任何延迟,但是你可以使用jQuery延迟。对于从右到左的变化方向:
animation: animatedBackground 40s linear infinite alternate;
-ms-animation: animatedBackground 40s linear infinite alternate;
-moz-animation: animatedBackground 40s linear infinite alternate;
-webkit-animation: animatedBackground 40s linear infinite alternate;
如果你想改变延迟添加到:
animation: animatedBackground 40s 5s linear infinite alternate;
-ms-animation: animatedBackground 40s 5s linear infinite alternate;
-moz-animation: animatedBackground 40s 5s linear infinite alternate;
-webkit-animation: animatedBackground 40s 5s linear infinite alternate;
或者添加这个,它会给你在最后的延迟并开始,如果你的意思是延迟通过“距离”:
background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
animation: animatedBackground 5s linear infinite alternate;
-ms-animation: animatedBackground 5s linear infinite alternate;
-moz-animation: animatedBackground 5s linear infinite alternate;
-webkit-animation: animatedBackground 5s linear infinite alternate;
}
/* Put your css in here */
@keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}
@-webkit-keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}
@-moz-keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}