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 プロパティでアニメーションを定義する場合、以下の項目を指定することができます。

まとめ

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

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