CSS3遷移[一時停止と速度の違い]

Question

シンプルなアニメーションを作成したいと思います。

1. 最初のステップ：0％から100％に1秒の速度でアニメーションを適用したいとします。
2. 第2ステップ：2秒のポーズを作成します。
3. 最終ステップ：divを0.5秒のスピードで左から右に動かしたいと思います。それが行うの最初のステップのために

.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、そして、2番目と3番目を果たしています。 私はそれが最良の方法だとは言いませんが、この場合は仕事をします。

また、1秒、2秒、0.5秒のタイミングをパーセントで変換し、この割合に従ってキーフレームを実行することもできます。この方法では、アニメーションが1つだけになります。

Answer 2

要するに、異なる速度で再生しないでください。代わりに、あなたは適切なパーセンテージで物事を設定し、物事がどこに行かなければならないかを理解するために少しの計算をします。

• ステップ1：1秒
• ステップ2：2S
• ステップ3：あなたがするように、総アニメーションの3.5S持っ

.5s

は、次の3つのステップを持っていますあなたの期間でなければなりません。

• ステップ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>