如果我有:
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
是否可以:
@keyframes animateLeftJump{
from{left:-300px;opacity:0}
to{left:0;opacity:1}
from{left:0px;}
to{right:100px;}
from{right:100px;}
to{left:0px;}
}
像从左到右再到左的小跳跃作为主要位置?
最佳答案
就像我在评论中提到的,你应该使用百分比来划分关键帧:
@keyframes my-animation{
0%{}
10%{}
50%{}
100%{}
}
由于关键帧被分割成多个部分,您必须为关键帧的每个部分计算整个动画的持续时间,以持续所需的持续时间。
例如,您提到您希望 0 - 10% 持续 3 秒,那么整个动画应该持续 30 秒。
animation-name: my-animation;
animation-duration: 30s;
div{
background:red;
animation:grow 30s infinite;
width:50px;
height:50px;
}
@keyframes grow{
10%{
width:200px;
height:200px;
}
50%{
width:400px;
height:400px;
}
100%{
width:100%;
height:600px;
}
}
<div>
</div>
关于css - 关键帧 css 中的更多内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45203163/