CSS3转换[暂停和不同速度]

第一步：我希望以1秒的速度动画我的div从0％到100％。
第二步：我希望创建2s的暂停。
最后一步：我希望以0.5秒的速度从左到右动画我的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>

对于第一步，它的完成。（你可以用我的代码看到顶部。）

但是我不能创建一个暂停并以不同的速度播放下一步。

感谢您的帮助。

来源

2016-11-04 user3730995

你可以连续使用您的动画。

.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，则第二，然后第三。我不认为这是最好的方式，但它在这种情况下完成了工作。

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

来源

2016-11-04 16:02:43 Kangouroops

总之，你不会以不同的速度播放它。相反，你只需按适当的百分比设置一些东西，然后稍微计算一下事情应该发生的地方。

你有三个步骤：

步骤1：1秒
步骤2：2S
步骤3：，5S

你必须总动画的3.5s的，从而使应该是你的持续时间。

步骤1百分比从0％变为（1s/3.5s）* 100％，或约28.6％。
第2步按百分比计算需要57.2％，所以从28.6％变为85.7％。
最后，第3步从85.7％变为100％。

对于暂停，您只需将其开始和停止保持相同的值。在这段时间内没有任何东西会移动，所以它基本上暂停了。

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

来源

2016-11-04 15:54:56 samanime

CSS3转换[暂停和不同速度]

回答

相关问题