はじめに
みなさんこんにちは。私はCSSを使ったアニメーションのつくりかたを紹介します。
アニメーションについては授業でやっておらず完全に独学なので間違っているところも多々あると思います。もっと理解を深めたいと考えているので、改善手等あったらコメントしてくださるとうれしいです。
アニメーションをつけるには
まず、HPでアニメーションをつける際に使うのは主にCSSもしくはJavaScriptの２通りです。違いとしてはCSSは文字の大きさ、色や背景などシンプルなアニメーションをつける際に使います。
JavaScriptは停止、巻き戻しなど細かくてクオリティの高いアニメーションが作れます。
今回はJavaScriptはまだ授業で習っていなかったのでCSSで作ります。
点滅するネオンサイン風のアニメーション
HP内の見出しにネオンサイン風のアニメーションをつけていきたいと思います。
まずは見出しを作りましょう。
<div class="animation">
<h1 class="neonText">animation</h2>
</div>
では、cssを作っていきましょう。
背景や色、文字の大きさなどを調整します。
See the Pen Untitled by yuma (@afuro-okina) on CodePen.
次はついにアニメーションをつけていきます！
cssに次のコードを書き足します。
.neonText {
animation: neon 1.5s infinite alternate;
}
このanimationプロパティ１つで定義名、変化時間、ループなどすべての要素をまとめて指定できます。すごいですね。
左から、定義名、変化時間、ループ、アニメーションの再生の向きを指定しています。ほかにも指定できるものがありますが、今回はこれだけでOKです。この場合だと定義名がneon、変化時間が1.5秒で無限にループし、alternateが奇数回では普通方向、偶数回では逆方向の再生で動きを繰り返すアニメーションになります。
次は@keyframesを使ってアニメーションの動きを指定します。
@keyframesとは、アニメーションの動きとタイミングを指定する際に使う規則です。
0%がアニメーションの始まりを表し、100%が終わりを表します。表示しているcssのように18％や22％など途中で動きを指定することもできます。
今回はテキストの影の色を変え、重ねることで点滅しているネオンサインを表現しました。
See the Pen Untitled by yuma (@afuro-okina) on CodePen.
無事にcssのみでかっこいいアニメーションが作れました！
しかし、コードがとても長くて見にくいですね。なのでまとめちゃいます。
See the Pen Untitled by yuma (@afuro-okina) on CodePen.
cssを見てみるとわかると思いますが、かなりすっきりしました。％の部分はまとめることができるみたいです。
私は授業でHPを作っていたときこれに気づかず、コードがえげつない長さになってました
おわりに
今回はテキストにアニメーションをつけましたが、ページが切り替わるときや、背景などもcssでも割といい感じのアニメーションが作れます。ほとんど独学だったので時間がかかったし、とても難しかったですが授業でいい感じのHPが作れました。調べているときに気づいたのですが、やはりJavaScriptのほうが細かくてかっこいいアニメーションが作れるみたいです。今度はJavaScriptも使って、見やすいHPを作ってみたいです。