COLUMN コラム

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

1. ＠keyframesとは

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

2. @keyframesの使い方①

■今回作成するもの

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

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

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

<div class="box">
</div>

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

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

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

.box {
 width: 200px;
 height: 50px;
 animation-name: color-animation;
 animation-duration:5s;
}

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

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

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

@keyframes color-animation {
 0% {
 background-color : red;
 }
 50% {
 background-color : green;
 }
 100% {
 background-color : yellow;
 }
}

結果

3. @keyframesの使い方②

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

■今回作成するもの

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

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

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

<div class="circle">
 <div class="heart">❤︎</div>
</div>

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

.circle {
　position: relative;
　width: 100px;
　height: 100px;
　border-radius: 50%;
　background-color: red;
　animation-name: circle-animation;
　animation-duration:5s;
}
/* ハートのスタイル */
.heart {
　position: absolute;
　font-size: 25px;
　color: white;
　top: 30px;
　left: 39px;
}

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

@keyframes circle-animation {
　0% {
　transform: rotate(0);
　}
　100% {
　transform: rotate(360deg);
　}
}

結果

おわりに

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

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