我有一个带有背景图像的框列表,它垂直滚动：
@keyframes movie {
0% { background-position: 50% 5%; }
50% { background-position: 50% 95%; }
0% { background-position: 50% 5%; }
}
.movie {
animation: movie 50s linear infinite;
}
“问题”在于,通过这种方式,所有盒子都具有同时移动的背景.
我想要一个“随机起点”,这样每个盒子都有不同的动画.
例如,一个背景向下移动而另一个背景向上移动.
纯CSS有可能吗？我用Javascript找不到简单的方法..
解决方法
您可以使用负动画延迟.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
Specifying a negative value for the animation delay causes the
animation to begin executing immediately. However,it will appear to
have begun executing partway through its cycle. For example,if you
specify -1s as the animation delay time,the animation will begin
immediately but will start 1 second into the animation sequence.
因此,如果您希望动画开始时为20％,则动画延迟为(-50s * 20％).你只需要使用javascript来创建随机起点.
