フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

「ふ」のtwitter。記事を更新するとつぶやきます。

コメント・お問い合わせはこちら。

CSSアニメーション、
animation-play-state。

〽️値。 〽️実例サンプル。 〽️少しだけJavaScript。 〽️次の段階へ。

• CSSアニメーション、作り方。
  

  2020.04.17
  webアニメーションを１から学ぼう♪

⬆︎CSSアニメーションについてのまとめページはこちら。

値。

animation-play-stateの値は２つのみです。

animation-play-state:「「１running」」;

「running」は初期値で、アニメーションを再生中の状態にします。

animation-play-state:「「１paused」」;

「paused」はアニメーションを一時停止の状態にします。
あくまで「一時停止」なので、再び「running」にしたときはCSSアニメーションはその停止している状態から再開されます。最初の状態に巻き戻ったりはしません。

実例サンプル。

animation-play-stateを使ったサンプルを紹介します。
記事のはじめにもお伝えしましたが、CSSアニメーションのplay/pauseを実装するからには何らかの外部アクション（切り替えのきっかけ）もセットでないと意味をなしません。

<div class = "sikaku"></div>

.sikaku { width:4em; height:4em; background-color:blue; animation:sikaku 2.8s linear alternate infinite; } @keyframes sikaku ｛ bbfrom { margin-left:10%; } bbto { margin-left:80%; } ｝

div要素が繰り返し左右に移動するCSSアニメーションです。
hoverした（←これがきっかけ）ときに一時停止するCSSを加えてみます。

.sikaku:hover { animation-play-state:paused; }

結果がこちら⬆︎。
PCの方はdiv要素にマウスカーソルを乗せるとCSSアニメーションが一時停止、離れると再開されます。
スマートフォンなどのタッチデバイスの方はクリックで一時停止、画面内の別の場所をクリックすると再開されます。

こんどは逆にhoverでアニメーションが開始されるものをつくってみましょう。

<div class = "kadomaru"></div>

.kadomaru { width:20%; height:4em; background-color:crimson; border-radius:1em; margin:0 auto; animation:kadomaru 2s infinite alternate 「「１paused」」; } @keyframes kadomaru ｛ bbto { width:80%; } ｝

<div>要素にはCSSアニメーションを仕込んでいますが、animation-play-stateを「paused」にしているため、現在は動きません。
hover指定のコードを追加します。

.kadomaru:hover { animation-play-state:「「１running」」; }

hover時にwidthが変化するアニメーションが実行されます。

少しだけJavaScript。

当コーナーでは基本、「HTMLとCSSだけでのコーディング」を前提にしていますが、ここで少しだけJavaScriptを使ったサンプルを紹介します。
JavaScriptではHTMLやCSSに働きかけるイベント処理（きっかけ）を自由にプログラムすることができ、 今回のanimation-play-stateと組み合わせることで、表現の幅が格段に広がります。
ボタンイベントを作ってみましょう。

<div id = "maru"></div> <button 「「１onclick = "pause()」」"> 一時停止/再開 </button>

#maru { width:4em; height:4em; border-radius:50%; background-color:green; animation:maru 2s infinite linear alternate; } @keyframes maru ｛ bbto { margin-left:80%; }

HTMLの<button>タグには、onclick属性としてpause関数を発動させることとしています。

現在はこの⬆︎ような状態。ボタンを押しても何もおきません。
ここにJavaScriptで関数pauseを定義します。

<script> let num = 1; const maru = document.getElementById("maru"); function pause() ｛ bbif(num == 1) ｛ bbmaru.style.animationPlayState = "paused"; bbnum = 0; bb｝ else ｛ bbmaru.style.animationPlayState = "running"; bbnum = 1; bb｝ ｝ </script>

ボタンを押すとCSSアニメーションの一時停止/再開が切り替わります。

当コーナーの方針からは少しばかり脱線して、JavaScriptを使ってしまいました。しかし「使いどころ」を考えたときに、今回のanimation-play-stateはCSS＋JavaScriptの併用を想定したプロパティだと思われます。
興味のある方は研究してみてください。

次の段階へ。

最後までお読みくださり、ありがとうございます。
今回紹介した、CSSアニメーションのanimation-play-state。プロパティ自体は「一時停止/再開」を切り替えるだけの単純なものですが、いろいろな「きっかけ」と組み合わせることで楽しいものが作れそうな予感がしますね、フフフ。

扨（さて）、今回でCSSアニメーションのプロパティは一通り学び終えました。次の段階へと進んでいきます・・とその前に、これまでの復習もかねて「中間テスト」でも企画しようかな？と考えたりもしています。
引き続き楽しく学習していきましょう！ではまた〜 ♪♪