はじめに 今回紹介する方法は「css」を使ったアニメーションの実装で、完了時に終了地点で止めておく方法です。 まずは、こちらの動画から実際の動作を確認しておきましょう。 こんな感じでアニメーションの完了地点を終了時の動作にすることができます。 ではまずcssでアニメーションを使う方法を確認しておきましょう。 cssのアニメーション cssでアニメーションを使う場合、基本的に以下のような記述方法をとります。 .test{ width: 300px; height: 150px; background-color: black; } .test:hover{ animation-name: background-anim; animation-timing-function: ease-in-out; animation-duration: 1s; } @keyframes backgroun
![【css】アニメーションの再生を終了時で固定する方法!](https://cdn-ak-scissors.b.st-hatena.com/image/square/b149736472933d9eccab71a94b492f508ed41396/height=288;version=1;width=512/https%3A%2F%2Fclrmemory.com%2Fwp-content%2Fuploads%2F2019%2F04%2F20171121151926.jpg)