CSSアニメーション、
発火のタイミングを制御する。

〽️ 方法〜class属性を追加する。 〽️ imgとボタンを配置。 〽️ アニメーションを仕込んで逃がす。 〽️ Jsで発火/消火。 〽️ 「条件」を工夫せよ。





⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

こんにちは、「ふ」です。
CSSアニメーション、楽しいですね。サイトに動きがついて良いアクセントに成増。

しかし全てのアニメーションが、ページがロードされた瞬間に開始されればいい、というものでもないでしょう。
たとえば「ボタンを押した時に初めて発火させたいアニメーション」を実装したいような時もあるはずです。

今回はJavaScriptを少しだけ使って、「ある条件が満たされた時にアニメーションを発火させる」仕組みを作ってみたいと思います。

方法〜class属性を追加する。


アニメーションの発火には、「要素にclass属性を追加する」方法を使います。
どーいうこと？
〜簡単なコードで見ていきましょう。

◼︎ HTML

ボールド

ブルー

１つ目の<p>タグにはid属性が、２つ目にはclass属性が指定されています。
それぞれのclassとidにCSSを記述します。

◼︎ CSS

#bold { font-weight:800; } .blue { color:blue; }


◼︎ ブラウザ

ブラウザにはこのように（見やすいようフォントサイズはデカくしています）。
それぞれのidやclassに指定されたCSSの内容が反映されていますね。

ここで１つ目の<p>要素に、class属性"blue"も追加してみます。

◼︎ HTML

<p id ="bold" 「「１class = "blue"」」 > ボールド </p>

ブルー



◼︎ ブラウザ

「blue」クラスのCSSに従って、１つ目の<p>要素の色も変わりました。
要素にクラス属性を追加すると、そのクラスに指定されているCSSの内容も反映されます。

ここでもし「blue」クラスのCSSにanimationが仕込まれていたとすると、要素にclass属性が追加された時点でanimationが発動することに成増。

そして「class属性の追加/削除」をJavaScriptで制御してやれば、CSSアニメーションの発火/消火をコントロールすることができますね。いけそうだ！





　

imgとボタンを配置。




今回は「ボタンが押されたらアニメーション発火（火が灯る）」という設定にしたいと思います。「ボタンが押される」というのがアニメーション発生の条件ですね。

HTML内に画像とボタンを配置していきます。

◼︎ HTML

<img 「「１id = "honoo"」」 src ="honoo.svg"> <input type = "button" value = "FIRE" 「「１onclick = "fire()"」」>

画像にはCSSを仕込めるようid名をつけておきます。
そしてボタンにはonclick属性で、後ほどJavaScriptで仕込む関数「fire（ ）」が呼び出されるようにしておきましょう。

使用する画像やボタンのサイズはみなさんお好みのものにしてください ♫
いちおー「ふ」が今回記述したCSSも貼っておきます。

◼︎ CSS

「「３/*　ボタン。　*/」」 input { display:block; font-size:1.5em; margin:auto; width:30%; margin-top:1em; } 「「３/*　炎。　*/」」 #honoo { display:block; width:50%; margin:0 auto; }




　

アニメーションを仕込んで逃がす。


アニメーションの内容自体は、炎の不透明度を周期的に変化させるという簡単なものです。書いていきましょう。

◼︎ CSS

#honoo{ display:block; width:50%; margin:0 auto; 「「１animation:honoo 1s infinite ease-in-out;」」 } 「「３/*キーフレーム。*/」」 @keyframes honoo { 0% { opacity:0.8; } 50% { opacity:0.4; } 100% { opacity:0.8; } }

結果はこのように⬆︎。

常にアニメーションが起きている状態ですね。
ここに後から追加するclass "ignite" を追記し、現状#honooに記述されているanimationプロパティを移行させておきます。



◼︎ CSS

#honoo{ width:40%; margin-left:30%; 「「５/*animation指定を削除*/」」 } 「「３/*後から追加するclass属性*/」」 「「１.ignite { 「「５/*こっちに移行*/」」 animation:honoo 1s infinite ease-in-out; }」」 @keyframes honoo { 0% { opacity:0.8; } 50% { opacity:0.4; } 100% { opacity:0.8; } }

#honooのプロパティからanimation指定を外したので、炎は静止したままになりました。
通常時は何もない状態にしたいので、#honooの不透明度を「0」にしておきますね。

◼︎ CSS

#honoo { width:40%; margin-left:30%; 「「１opacity:0;」」 }

これで準備O.K.です。





　

Jsで発火/消火。


扨（さて）いよいよanimationの発火制御をJavaScriptで仕込んでいきましょう、
要素にclass属性を追加/削除するには、以下のメソッドを使用します。

・クラス属性の追加：
（要素を参照する変数）.classList.add("クラス名");

・〜削除：
（要素を参照する変数）.classList.remove("クラス名");

せっかくなので再度ボタンを押したときに「消火」もできるようにしました。フラグとなる変数「flag」を置いて、条件分岐します。

◼︎ JavaScript

「「３//要素を参照する変数」」 var honoo = document.getElementById("honoo"); 「「３//発火/消火に使うフラグ」」 var flag = 0; 「「３//ボタンを押した時に呼び出される関数」」 function fire() { 「「３//発火」」 if (flag == 0) { 「「１fire.classList.add("ignite");」」 flag = 1; } 「「３//消火」」 else { 「「１fire.classList.remove("ignite");」」 flag = 0; } }


◼︎ 結果


完成品はこちら⬆︎。実際にボタンを押してみてください。発火/消火が繰り返されます。





　

"条件"を工夫せよ。


うまくいきましたか？　今回はシンプルに「ボタンが押される」という条件でアニメーションを発火/消火させてみました。この"条件"の部分を工夫すれば、観ていて楽しく、操作しやすいサイトが作れそうです。

たとえばスクロールで要素が画面内に表示された時に発火させるとか・・ 他にも、皆さんのほうで何かアイデアが浮かびましたか？

ユーザの行動に反応して発火するアニメーションというのも面白いですね。ではまた〜

関連記事

SVG、線を描くアニメーション。

2020.09.23
〽️ 破線のプロパティをつかいます。


SVG、use要素を使ったモーションパス。

2020.09.07
〽️ ポイントは‥「マイナスの遅れ」。


SVG、モーションパスで複数の要素を動かす。

2020.08.29
〽️ 小技を集結させて実装します。


SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。

2020.07.06
〽️ テキストの内部だけアニメーション。












「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。