CSS animationを止める方法【一時停止か終了時点で止める】
CSS animationを止める方法【一時停止か終了時点で止める】 2020年02月24日CSS animationを使ったものの、止め方がわからない。
一時停止させたい！
最後の状態で止めたい！
そんな「CSS animationを止める方法」を説明します。
結論
一時停止の場合animation-play-state: paused を使う。
アニメーション最後の状態で止める場合animation-fill-mode:forwards を使う。
以下でデモをお見せします。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
一時停止の場合
animation-play-state: paused
animationを一時停止するには上記CSSを使います。
↓マウスを乗せると一時停止します。
html
<div class="animationwrap"><div class="animation"></div></div>CSS
.animationwrap{ border: 1px solid #f2f2f2; height: 40px; position: relative; overflow: hidden; } .animation{ width: 20px; height: 20px; background: red; position: absolute; top: 10px; animation: ugoki 3s linear infinite; } .animationwrap:hover .animation{ animation-play-state: paused;/*コレが一時停止*/ } @keyframes ugoki{ 0%{ left: 0; } 100%{ left: calc(100% - 20px); } }アニメーション最後の状態で止める場合
animation-fill-mode:forwards
animationを最後（100%）になったら止めるには上記CSSを使います。
↓マウスを乗せると動き出し、右端で止まります。
html
<div class="animationwrap"><div class="animation2"></div></div>CSS
.animationwrap{ border: 1px solid #f2f2f2; height: 40px; position: relative; overflow: hidden; } .animation2{ width: 20px; height: 20px; background: red; position: absolute; top: 10px; } .animationwrap:hover .animation2{ animation: ugoki 3s linear; animation-fill-mode:forwards;/*コレが最後停止*/ } @keyframes ugoki{ 0%{ left: 0; } 100%{ left: calc(100% - 20px); } }アニメーションが100%の状態を維持します。
注意点として、無限繰り返しであるanimation-iteration-count:infinite を指定していると止まらないので気をつけましょう。
アニメーション停止の応用
アニメーションを一時停止できる特色を使って停止可能なCSSだけのスライドショーを作成しました。
CSSのみスライドショー【選択ボタン付き自動再生】CSSのみのスライドショーです。自動再生する上に選択ボタンも付いています。htmlのラジオボタンとCSSを駆使して作成しました。この記事を読むまとめ
一時停止の場合animation-play-state: paused を使う。
アニメーション最後の状態で止める場合animation-fill-mode:forwards を使う。
以上、CSS animationを止める方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。
htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む CSSやhtmlをマンガで学ぶ