css - 关键帧 css 中的更多内容

Question

如果我有:

@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;}
}

像从左到右再到左的小跳跃作为主要位置？

Answer 1

就像我在评论中提到的，你应该使用百分比来划分关键帧:

@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>