CSSでアニメーションを学び始めた方向けに、@keyframesの基本事項をまとめてみました。
@keyframesは、基本的な考え方さえ理解できれば、割と簡単に細かなデザインが可能になりますね。
まずは基本中の基本としてまとめてみましたので、サイト構築中に「あれ？」などと曖昧になったときにでもこのサイトで見直してもらえればと思います。
なお、CSSのアニメーションの書き方そのものの基本をまとめたサイトも別にありますので、アニメーションに触れるのが本当に初めてという方は、まずはそちらの理解から始めることをおすすめします（タグメニューの「CSS」に総まとめ記事があります）。
では、順を追ってみていきましょう。
CSSの初心者向けに@keyframesの基本をまとめてみた
@keyframesとは
@keyframesは、変化前と変化後の途中に、任意のタイミングでキーとなるフレームを差し込む手法です。
@keyframeを差し込んでおいて、「animation」プロパティを使うことによって、より複雑にアニメーションを展開させることができるようになります。
アニメーションを始めた頃に学んだ「transition」と違うところは、設定したアニメーションを複数回繰り返したり、永遠に動作させたりすることが可能になる点にあります。
まずは具体例を以下のようにみてみましょう。
この設定を細かく解説すると以下のようになります。
まずは「@keyframes」の記述部分がこちらです。
CSS
@keyframes go {
0% {
transform: none;
}
30% {
transform: translate(200px, 300px) rotate(360deg) ;
}
100% {
transform: translate(400px, 100px) rotate(360deg) scale(0.4, 0.4);
}
}
- @keyframesに「go」というネーミングを付けています。これは、あとで読み込むときの識別子のようなものなので、名前は自由でOKです。@keyframesの設定内容は、全体を { }で囲みます。
- 「0%」は時間の経過を示します。この場合「最初の状態」という意味になっています。最初の「0%」の状態はわざわざ書かなくてもOKですが、コードの分かりやすさを考えて、 あえて書いてもOKです。
- 「30%」のとき、すなわちdurationを「3s」と指定しているなら「0.9秒」のときの状態を、{ }内で設定しています。
- 「100%」で、アニメーション効果の最後の状態を、{ }内で設定しています。
以上が@keyframeの設定についての説明になります。
続いては、BOX1に対して当てた宣言を切り取ってみてみましょう。
CSS
.box1 {
width: 50px;
height: 50px;
background: #1ab4d3;
animation-name: go;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
- 「animation-name: go;」で、@keyframesで設定した識別子の「go」を読み込ませています。
- 「animation-duration: 3s;」で、アニメーションにかける所要時間を3秒に設定しています。
- 「animation-fill-mode: forwards;」で、100%の状態のままで終了するように設定しています。（この指定がなければ、アニメーションが終わると0%の状態に自動リセットされます。）
- 「animation-iteration-count: infinite;」で、アニメーション効果が繰り返し実行されるように設定しています。例えば「infinite」を「3」と変更すれば、3回繰り返した後に自動的に終了します。
- 「animation-direction: alternate-reverse;」で、繰り返し実行の際に、リバース再生するように設定しています。ここを「alternate」とすれば折り返して逆再生、「reverse」とすれば逆側から再生開始、など、その他いろいろな値で操作することができます。
animationの一括指定
@keyframsでも、animationでプロパティを一括指定することができます。
CSS
.box1 {
width: 50px;
height: 50px;
background: #1ab4d3;
animation-name: go;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
この記述を一括指定で書くと以下のようになります。
CSS
.box1 {
width: 50px;
height: 50px;
background: #1ab4d3;
animation: go 3s forwards infinite
alternate-reverse;
}
一括指定の際に気をつけるべき点は、transitionの場合とほぼ同じです。
「animation」一括指定の際のPoint
- 「animation」プロパティの値として、順不同で、半角スペース区切りで並べればOKです。
- 時間に関する値は「0.5」であれば「.5」として「0」を省略することが可能です。
- 時間に関する値は、先に書いた方が「animation-duration」、後に書いた方が「animation-delay」を意味することになります。
@keyframesを使った例
CSSアニメーションによる表現の幅の広がりを、もう少し例を挙げて見てみましょう。
回転するアイコン
ローディング中によくみられるようなアイコンを作ってみます。
HTML
<div class=”wakka”></div>
CSS
.wakka {
width: 80px;
height: 80px;
border: 10px dashed skyblue;
border-bottom-color: transparent;
border-radius: 50%;
}
これで、以下のようなボックスができますね。
このdiv要素で作った輪っかのような図形を、@keyframesを使って1回転するのに1秒、繰り返しをinfinite（無限）と指定すれば、以下のようになります。
ポップアップアニメーション
もう一つ、メニューが欄外から現れて、欄外に消えていくといったような効果を作ってみます。
HTML
<div class=”pyonpyon”>ぴょんぴょん!</div>
CSS
.pyonpyon {
width: 300px;
text-align: center;
padding: 8px 16px;
background: skyblue;
color: #ffffff;
border-radius: 8px;
box-shadow: 10px 8px 10px silver;
position: fixed;
top: 48px;
left: 48px;
}
これで、以下のようなアイコン風のメニューができますね。
このdiv要素に@keyframesを使って、
- 徐々に縦方向に移動（translateY）
- 徐々に表示・非表示（visibility）
- 徐々に透明度の増減（opacity）
といった効果を3秒かけて実行、と指定すれば、以下のようになります。
まとめ
以上、CSSにおける@keyframes操作の基本について見てきました。
ここまで理解できたら、あとはバリエーションが無限に広がって、想像力を使ってWebデザインを楽しむことができますね。
皆さんのお役に立てれば幸いです！
自宅で学べるオンラインスタイルの「TECH CAMP」で無料カウンセリングやってます！
