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 animateLeftJump{
  from{left:-300px;opacity:0} 
  to{left:0;opacity:1}
  from{left:0px;} 
  to{right:100px;}
  from{right:100px;}
  to{left:0px;}
}

你说： Can I divide it by 1000 times? like 0.1%{}

是的：但更改关键帧的速度很快，您必须准确设置animation-duration和keyframes。

div {
  width: 100px;
  height: 100px;
  background-color: #000;
  animation: test 2s infinite;
  color: #FFF;
}

@keyframes test {
  0.01% {background-color:orange }
  0.08% {background-color: blue}
  0.15% {background-color: green}
  0.20% {background-color: red}
  0.25% {background-color: skyblue}
}

<p>It's so fast that you can not see some of the changes</p>
<div>See change Keyframes</div>

Answer 2

就像我在评论中提到的那样，您应该使用百分比来划分关键帧：

@keyframes my-animation{
  0%{}
  10%{}
  50%{}
  100%{}
}

由于关键帧被拆分为多个部分，因此您必须计算关键帧每个部分的整个动画的持续时间，以持续所需的持续时间。

例如，你提到你想要0到10％持续3秒，那么整个动画应该持续30秒。

animation-name: my-animation;
animation-duration: 30s;

＆＃13;

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

＆＃13;

<div>
</div>

＆＃13;

更多来自/到关键帧css

2 个答案: