现目前动画能实现了,但是不能循环播放,使用animation-iteration-count: infinite;来循环播放的时候达不到我想要的效果
animation-iteration-count: 2147483647;
如果是循环的效果不理想,那么可以考虑将每次播放的结束帧跟开始帧连贯。
将每次播放的结束帧跟开始帧怎么连贯起来呢?
这是我理解的写法,但是不行,p1是前面四个字,p2是后面八个字
@快乐留给你: 这个就只能调.p1和.p2的动画时间和延迟时间,来达到.p1连贯.p2的效果了。
例(不知道这样是不是你想要的效果呢):
.p1的部分
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 2s;
.p2的部分
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 5s;
@listen.core: 有点像了,谢谢你
@快乐留给你: 还有一种方式,调整动画选择器@keyframes (不需要延迟动画)
例(动画的效果自己修改哈):
.p1的部分
animation-name: mymove; animation-duration: 3s; animation-iteration-count: infinite; animation-delay: 0s; @keyframes mymove { 0% { left:0px; } 60% { left:100px; } 100% { left:100px; } }
.p2的部分
animation-name: mymove2; animation-duration: 3s; animation-iteration-count: infinite; animation-delay: 0s; @keyframes mymove2 { 0% { left:100px; } 40% { left:100px; } 100% { left:200px; } }
@listen.core:
这样嘛?
.p1{
animation-name: mymove;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
@keyframes mymove {
from {
opacity: 0;
-webkit-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
0% {
left:0px;
}
60% {
left:100px;
}
100% {
left:100px;
}
}
.p2 {
animation-name: mymove2;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
@keyframes mymove2 {
from {
opacity: 0;
-webkit-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
0% {
left:100px;
}
40% {
left:100px;
}
100% {
left:200px;
}
}
若是这样的话,这个实现的效果就是全部文字一起渐变循环往下移
@快乐留给你: 把from和to的动画变化效果,用百分比替代。
上面的例子.p1 60%到100%效果是一样的。
.p2 0%到40%效果是一样的。
也就是说: p1前60%的时间是动画的变化,后面40%的时间是执行一次后的等待。
p2前40%时间是执行前的等待,后60%时间是动画的变化。
关于@keyframes可以参考这个:http://www.w3school.com.cn/cssref/pr_keyframes.asp
@listen.core: 已经解决了,非常感谢