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

Question

我想创建一个简单的动画。

1. 第一步:我想用1秒的速度将我的div从0%动画到100%。
第二步:我想创建一个2s的暂停。
2. 最后一步:我想以0.5s的速度从左到右动画我的div。

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

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

第一步已经完成。(你可以看到我的代码到顶部)

但是我不能为接下来的步骤创建一个暂停和播放不同的速度。

谢谢你的帮助。

Answer 1

你可以链接你的动画

.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，然后第二个，然后第三个。我不是说这是最好的方法，但在这种情况下它确实有效。

你也可以转换你的时间15秒，2s, 0.5秒的百分比，并根据这个百分比做关键帧。这样，你就只有一个动画了。

Answer 2

简而言之，你不会以不同的速度演奏。相反，你只要把事情设定在适当的百分比，然后做一点数学计算，就能知道事情应该怎么做。

你有三个步骤:

• 步骤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%。

对于pause，只需让它的start和stop保持相同的值。在这段时间内没有任何东西会移动，所以它实际上是暂停的。

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

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