CSSでアニメーションを作ろう！”keyframes”について解説！

はじめに

こんにちは！プラコレのアドベントカレンダー2日目です！！

10月からプラコレでお世話になっている森下です。
私は9月まで看護師をしていました

日々業務を行いながら勉強という感じですが、
今回は最近教えていただいたcssでのアニメーションについてお話しようと思います〜！

どうかお手柔らかにお願い致します

CSSだけでアニメーションを作る方法って？

アニメーションというと、JavaScriptやjQueryを思い浮かべ、
難しそうというイメージを持つ方もいるかと思います。

ここではCSSで簡単にアニメーションを実装させる方法をサンプルを一緒にご紹介しようと思います

CSS3 でアニメーションを実装する方法は大きく分けて以下の2種類があります。
・ transition プロパティでの定義
・ animation プロパティでの定義

【Transition】
・始めと終わりのみ指定可能(始点から終点までの2点間のアニメーションしか行えない)
・自動再生はできず、:hover などのきっかけが必要
・ループの設定は不可

【Animation】
・設定時間の中で開始・終了するタイミングや値の変化などを細かく設定でき複雑なアニメーションを実現可能
・ループの設定可能
・:hover などのきっかけがなくても実行可能

言い換えると・・・
「animation」はアニメーションの段階を細かく指定することができ、アニメーション開始のきっかけも不要！
というわけです！　便利そう！！笑

アニメーションの設定方法

animation プロパティでは、@keyframes(キーフレーム)を利用したアニメーションを設定することができます。
つまり
animation プロパティを使用してアニメーションを行うには、キーフレームを作成する必要があります。

【キーフレーム @keyframes】
@keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。
@keyframes は、@規則のため、@から始まり、波括弧内に記述します。

@keyframes 任意の名前 {
    0% {
        CSSプロパティ:値;
    }
    100% {
        CSSプロパティ:値;
    }
}

@keyframes の後に任意でアニメーションの名前を決められます。

例えば、横幅が拡大するアニメーションなら sizeScale、
フェードインするアニメーションなら fadeIn のように、
アニメーションの名前を任意で決めてOKです！！！

0% はアニメーション開始時を表しており、100% はアニメーション終了時を表しています。
その波括弧の中にCSSプロパティを記述して、アニメーションを指定します。

わー簡単！！これならできそう！！笑
それでは実際にやってみましょう〜！！

keyframeを使ったアニメーション（サンプルあり）

【ピンクのボールをふわふわ浮かせる】

See the Pen RwNWMZZ by kaho (@kaaho) on CodePen.

可愛いですね。ちょっとした装飾にも良いいかもです〜

【オレンジのボールをバウンドさせる】

See the Pen vYENRZZ by kaho (@kaaho) on CodePen.

バスケボールみたいですね〜

【四角のBOXを色を変えて回転させる】

See the Pen NWPGyWR by kaho (@kaaho) on CodePen.

くるくる〜色もガチャガチャ〜

【四角のboxを色々な方向にクルクル】

See the Pen oNgjqjx by kaho (@kaaho) on CodePen.

【真ん中からビヨーン】

See the Pen BayoYjK by kaho (@kaaho) on CodePen.

ビヨ〜ン

【右からビヨーンビヨーン（トロンボーン風に段階分けて）】

See the Pen RwNWQRw by kaho (@kaaho) on CodePen.

段階で色も変わりま〜す

【ビヨーンをマウスオーバーかクリックで止める】

See the Pen eYmpVdM by kaho (@kaaho) on CodePen.

邪魔なものは止めちゃいましょう〜

【波のように】

See the Pen mdyeXXV by kaho (@kaaho) on CodePen.

アニメーション関連のプロパティー

animation プロパティでアニメーションを定義する場合、以下の項目を指定することができます。

プロパティ	説明	初期値
animation-name	アニメーションの名前	none
animation-duration	アニメーションが開始してから終了するまでの時間	0s
animation-timing-function	アニメーションのイージング（加速度）	ease
animation-delay	アニメーションが開始するまでの時間	0s
animation-iteration-count	アニメーションを繰り返す回数	1
animation-direction	アニメーションの再生方向（順番・逆再生）	normal
animation-fill-mode	アニメーション開始と終了時のスタイルの状態	none
animation-play-state	アニメーションの再生・停止	running
animation	上記のプロパティを一括で指定できるショートハンド	上記のそれぞれの初期値と同じ

まとめ

CSSだけでもいろんなアニメーションができますね！
秒数や速度を変えることでもアレンジできて動きの幅が広がります。
このCSSアニメーションにjsをつけるとさらに高度なアニメーションも実現することができます！！

See the Pen BayoVEd by kaho (@kaaho) on CodePen.

最後に

明日はプラコレのスーパーエンジニアの澤岻さんが記事を公開します！
楽しみにしています！！

プラコレではエンジニアも！デザイナーも！
募集しています！！

プラコレはプラコレWedding以外にも
ウェディングのメディアDressyやfarnyなども運営しています。
ぜひ見ていってもらえると嬉しいです！