COLUMNコラム

CSSアニメーション「@keyframes」の使い方

 

 

CSSアニメーションの設定は初めての人にとっては難しいですよね。
今回は@keyframesをはじめて使う方、CSSだけを使ってアニメーションさせたい方にとても簡単にできるアニメーション作成を紹介します。

 

 

1. @keyframesとは

指定した時間の中で、どのように変化(アニメーション)をするかを設定できるものです。
CSSファイルに書けるので、手軽に取り入れられます。

2. @keyframesの使い方①

■今回作成するもの

赤いボックスを5秒の中で色を変化させるアニメーションを作成します。

 

5秒の中で赤→緑→黄色に変化をさせます。
手順は下で説明します。

2-1. htmlファイルにボックスを用意する

2-2. CSSファイルにボックスのスタイルを書く

animation-nameはアニメーション名を書きます。
自分の好きな名前を付けます。

animation-durationはアニメーション全体の秒数です。
自分の好きな時間を設定してください。
今回は5秒(5s)にしました。

2-3. CSSファイルにアニメーションの記述を書く

@kryframesの後ろに上記でつけたanimation-nameを書きます。
今回はcolor-animationという名前にします。

0%が最初の色(赤)→50%が次の色(緑)→100%が最後の色(黄色)です。

2-4. 完成

結果
 

 

3. @keyframesの使い方②

さきほどと同じ要領で別のアニメーションも作成していきます。

 

■今回作成するもの

5秒の中で赤丸を360度回転させます。

3-1. htmlファイルに赤丸を用意する

回転の際に回転をわかりやすくするために中にハートを入れました。

3-2. CSSファイルに赤丸のスタイルを書く

3-3. CSSファイルにアニメーションの記述を書く

3-4. 完成

結果
 

❤︎

 

おわりに

簡単な@keyframesの使い方をご紹介しました。
今回は0%、50%、100%で作成しましたが、0%、20%、50%、70%、100%など細かく時間経過を設定することができます。
使い方によっては複雑なアニメーションも作成できるので、今後も色々な使い方を見つけていきたいと思います。

 

 

 

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。

 

 

DOLに制作を相談する