CSSで時間をかけて滑らかな画像のアニメーションを作成

Question

確執は、コインが本当にスムーズに上下に移動するとされている素敵なアニメーションのページ

https://discordapp.com/

を持っています。このロジックを自分のイメージにコピーするにはどうすればよいですか？

画像がスムーズに移動していないコードをテストする場合、私はこのコード

img { 
 
    animation-name: move; 
 
    animation-duration: 2.5s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-in-out; 
 
} 
 

 
@keyframes move { 
 
    0% { 
 
    margin-top: 0px; 
 
    } 
 
    50% { 
 
    margin-top: 10px; 
 
    } 
 
    100% { 
 
    margin-top: 0px; 
 
    } 
 
}

<img src="https://gonintendo.com/system/file_uploads/uploads/000/013/369/original/bg-header-earn-coins.png">

で開始。私はanimation-timing-function: ease-in-out;を使って私にそれをすると思った。

何か不足していますか？

Answer 1

アニメーションの場合、移動時間と移動距離は非常に重要です。アニメーションの種類も重要です。 CSS transformの代わりにマージンを使用すると、GPUが使用される可能性が低くなります。一般にGPUを使用しない場合よりアニメーション化する方が効果的です。

基本的に、あなたのコードは、不和に使用されているタイミングやアニメーションスタイルを忠実に再現するものではありません。これは近い：

img { 
 
    animation-name: move; 
 
    animation-duration: 1.5s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-in-out; 
 
    animation-direction: alternate; 
 
} 
 

 
@keyframes move { 
 
    0% { 
 
    transform: translate3d(0,-4px,0) 
 
    } 
 

 
    to { 
 
    transform: translate3d(0,4px,0) 
 
    } 
 
}

<img src="https://gonintendo.com/system/file_uploads/uploads/000/013/369/original/bg-header-earn-coins.png">