Question

我希望创建一个简单的动画。

第一步：我希望以1s的速度将我的div从0％设置为100％。
第二步：我希望暂停2秒。
最后一步：我想以0.5秒的速度从左到右动画我的div。

＆＃13;

.effect {
-webkit-animation:.effect 1s ease both;
animation:effect 1s ease both;
background-color:#1c1f26;
display:block;
height:100%;
left:0;
overflow:hidden;
position:absolute;
top:0;
width:100%;
}

@-webkit-keyframes effect {

0% {
-webkit-animation-timing-function:ease-in;
width:0%;
}

100% {
-webkit-animation-timing-function:ease-out;
width:100%;
}

}

＆＃13;

<div class="effect"></div>

＆＃13;

第一步就完成了。（你可以看到我的代码到顶部。）

但我无法为后续步骤制作暂停和不同速度的游戏。

感谢您的帮助。

Answer 1

简而言之，你不能以不同的速度播放它。相反，你只需设置适当的百分比，并做一些数学计算，找出应该去的地方。

您有三个步骤：

第1步：1s
第2步：2s
第3步：.5s

你有3.5秒的总动画，所以这应该是你的持续时间。

第1步，百分比，从0％变为（1s / 3.5s）* 100％，或约28.6％。
第2步，按百分比计，占57.2％，因此从28.6％升至85.7％。
最后，步骤3从85.7％变为100％。

对于暂停，你只需要它的开始和停止保持相同的值。没有什么会在这段时间内移动，所以它基本上是暂停的。

＆＃13;

.effect {
  -webkit-animation: effect 3.5s ease both;
  animation: effect 3.5s ease both;
  background-color: #1c1f26;
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

@-webkit-keyframes effect {
  0% {
    -webkit-animation-timing-function:ease-in;
    width: 0%;
  }
  
  28.6% {
    width: 100%;
  }
 
  85.7% {
    width: 100%;
    margin-left: 0;
  }
  
  100% {
    margin-left: 100%;
    width: 0;
  }
}

＆＃13;

<div class="effect"></div>

＆＃13;

Answer 2

您可以链接动画。

.effect {
animation: animation-1 1s ease,animation-2 2s ease 1s,animation-3 0.5s ease 3s;
background-color:#1c1f26;
display:block;
height:100%;
left:0;
overflow:hidden;
position:absolute;
top:0;
width:0%;
}

@keyframes animation-1 {
    from {width: 0%;}
    to {width: 100%;}
}
@keyframes animation-2 {
    from {width: 100%;}
    to {width: 100%;}
}
@keyframes animation-3 {
from {width: 100%; left:0;}
to {width: 0%; left: 100%}
}

<div class="effect"></div>

这样，首先它播放动画-1，然后是第二个，然后是第三个。我不是说这是最好的方式，但它在这种情况下完成了工作。

您还可以按百分比转换时间1s，2s，0.5s，并根据此百分比执行关键帧。这样，您将只有一个动画。

CSS3过渡[暂停和不同速度]

2 个答案: