【css】アニメーションの再生を終了時で固定する方法！

cssでアニメーションを実装すると、アニメーションが完了した時に最初へ戻ってしまいますよね。

もしそのような場合に、アニメーションを終了地点で止めておくことができるので紹介します。

はじめに

今回紹介する方法は「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 background-anim{
0%{
background-color: black;
}
100%{
background-color: white;
}
}

このように記述すれば、.testというクラスにマウスが乗った時に背景色が黒から白に変わります。

この時調整する項目は

animation-nameはキーフレームの名前、animation-durationは完了までにかかる時間です。

これだけでアニメーションは実行できたのですが、アニメーション完了時に背景色が黒に戻ってしまいますよね。今回の方法では白の状態で止まっておくのが理想的です。

アニメーション完了時で固定する

では実際にどのような記述をすればアニメーションの完了時で止めておくことができるのでしょうか。先ほど作成したcssに以下のような記述を追加してください。

animation-fill-mode: forwards;

先ほどのコードを例にとった場合「.test」か「.test:hover」の中にこのような記述を追加してください。

実際にアニメーションを動作させてみると、アニメーションの完了時に最初に戻ることなく終了時で固定されましたね。

ちなみにanimationはこんな感じでまとめることもできます。

animation: background-anim 1s ease-in-out forwards;

まとめ

今回紹介したように「animation-fill-mode: forwards;」を使えば、cssで作成したアニメーションの終了時の動作を変更させることができました。

cssのアニメーションは意外と便利で、カスタマイズ性もあるので是非使いこなしてみてください。

【はてなブログ】背景をアイキャッチ画像にしたら記事全体がいい感じになった！

2017.7.31

今回は、はてなブログで作成した記事の背景を「アイキャッチ画像」に変更する方法を紹介します。 記事ごとに別の背景を自動で設定できて、デザイン性もアップするのでぜひ試してみてください。...

ではまた。