cssアニメーションの問題あり

CSSのアニメーションビットをスムーズにする方法はありますか？なぜなら、各ステップで私のアニメーションが「ブレーク」を作り、素晴らしいアニメではないという問題が発生したからです。あなたがSEここでわかるよう：cssアニメーションの問題あり

@-webkit-keyframes rocketStart { 
 
    0% { 
 
    transform: translate(0px, 0px) rotate(0deg); 
 
    } 
 
    5% { 
 
    transform: translate(0, 20px) rotate(20deg); 
 
    } 
 
    10% { 
 
    transform: translate(-10px, 40px) rotate(25deg); 
 
    } 
 
    20% { 
 
    transform: translate(-20px, 60px) rotate(40deg); 
 
    } 
 
    30% { 
 
    transform: translate(-45px, 80px) rotate(55deg); 
 
    } 
 
    40% { 
 
    transform: translate(-85px, 105px) rotate(68deg); 
 
    } 
 
    50% { 
 
    transform: translate(-195px, 135px) rotate(77deg); 
 
    } 
 
    100% { 
 
    transform: translate(-400px, 300px); 
 
    } 
 
} 
 
.rocket-move-one { 
 
    -webkit-animation-name: rocketStart; 
 
    animation-name: rocketStart; 
 
    -webkit-animation-duration: 5s; 
 
    animation-duration: 5s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 
.rocket { 
 
    position: absolute; 
 
    width: 45px; 
 
    height: 92px; 
 
    left: 485px; 
 
    top: -50px; 
 
    background-color: red; 
 
}

<div style="width:100%; height:600px; position;relative;"> 
 
    <div class="rocket-move-one rocket"></div> 
 
</div>

出典

2016-06-16 johnny04501

質問に言及[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snip）ペット/）。 [**最小限の完全で検証可能なサンプルを作成する方法**]（http://stackoverflow.com/help/mcve）を参照してください。 –

キーフレームの定義を具体的にして、それをずらして考えると、 'animation-timing-function：linear'です。デフォルト値は 'ease'なので、各キーフレーム間の遅い開始、早い中間部分、遅い端*が表示されます。 – Harry

[this]（https://jsfiddle.net/L53pzkwc/）のようなものかもしれません。 – Harry

これを試してみてください：

.rocket-move-one { 
    animation-timing-function: linear; 
}

出典

2016-06-16 12:32:25 Zentryn

使用animation-timing-function: linear;も、アニメーションの速度を取得します。

よりスムーズに移行するには、次のようなキーフレームを調整する必要があります。好ましく**

@-webkit-keyframes rocketStart { 
 
    0% { 
 
    transform: translate(0px, 0px) rotate(0deg); 
 
    } 
 
    50% { 
 
    transform: translate(-195px, 135px) rotate(77deg); 
 
    } 
 
    100% { 
 
    transform: translate(-400px, 300px) rotate(0deg); 
 
    } 
 
} 
 
.rocket-move-one { 
 
    -webkit-animation-name: rocketStart; 
 
    animation-name: rocketStart; 
 
    -webkit-animation-duration: 5s; 
 
    animation-duration: 5s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    -webkit-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
} 
 
.rocket { 
 
    position: absolute; 
 
    width: 45px; 
 
    height: 92px; 
 
    left: 485px; 
 
    top: -50px; 
 
    background-color: red; 
 
}

<div style="width:100%; height:600px; position;relative;"> 
 
    <div class="rocket-move-one rocket"></div> 
 
</div>

出典

2016-06-16 12:35:51 Pugazh

だけ

-webkit-transition:all 1s ease;

使用し、質問自体に**それを再現するために必要な最短のコードが含まれている必要があり、コードの助けを求めるanimation-timing-function

出典

2016-06-16 12:37:07 Maharajan

cssアニメーションの問題あり

答えて

関連する問題