目次
Javascriptで読み込んだCSSにアニメーションを付けていきます。
- アニメーションの付け方
アニメーションの付け方
・では昨日作ったボタンを押したら赤い丸の変わる要素のもっとアニメーション要素を作っていきましょう。
・アニメーションはCSSのtransformを使っていけばいいので先日作った変化前である.boxと変化後である.circleのそれぞれのクラス属性にスタイルを追加していきましょう。
・今回はアニメーションで自然に四角から丸に変えていきたいので変化時間を0.8秒にしたいのとせっかくなので360度回転して変わるようにしていきたいと思います。
・まずはCSSの.boxに変化時間を書いていきます。transition: .8s;と書けば変化時間を0.8秒に指定ができます。
・変化後の.circleの方には回転をさせるためのプロパティを指定してあげればいいのでtransform: rotate(360deg);としてあげましょう。360度回転して丸くなります。
・このようにjavascriptではCSSを読み込んでアニメーションさせることもできます。
・アニメーションについてもっと詳しく学びたい場合はCSSのアニメーションの記事を参照してください。
