こんにちは。
Webデザイナーの山本です。
今回はCSSアニメーションの種類や詳細、使い方の例などをご紹介します！

CSSアニメーションとは？

CSSアニメーションとは、CSSだけでアニメーションすることができる機能のことです。
animationとtransitionの２種類があります。
animationは再生回数を指定したり逆再生や遅延して再生など詳細な指定が可能ですが、transitionはhover（マウスオーバー）などのタイミングで１度だけの再生になります。
主な違いはこんな感じ。

animation

animationは@keyframesを使って設定していきます。

テンプレート

まとめて書いた場合は以下のような感じになります。
nameやプロパティは任意で変更してください。
ベンダープレフィックス（-webkit-、-moz-）も追加しましょう。

★★★ １つずつ書いた場合 ★★★
.con{
    animation-name: name;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction:alternate;
}
★★★ まとめて書いた場合 ★★★
.con{
    animation: name 1s 0.5s ease-in-out infinite alternate;
}

★★★ 複数をまとめて書いた場合 ★★★
.con{
    animation: name 1s 0.5s ease-in-out infinite alternate , name2 1s 1.5s ease-in-out infinite;
}

@keyframes name{
    0%{
    }
    100%{
    }
}

種類

animationの種類は以下になります。

各詳細

animation-name（キーフレームの名前）

どの@keyframesを使用するか指定するためのプロパティ。

animation-duration（かかる時間）

何秒間アニメーションさせるかを指定するためのプロパティ。

animation-timing-function（速度）

アニメーションの速度を指定するためのプロパティ。

stepsについて書くと長くなってしまうのでまた別の機会にと思うのですが、簡単にいうとコマ撮りのアニメーションみたいなことができるようになります。

試しにチャカくん（弊社peakvoxレーベルのオリジナルキャラクター）をstepsで動かしてみると以下のようになります。

▼元の画像

コマを増やせばその分なめらかな動きになります。

animation-delay（何秒後に開始するか）

アニメーションを何秒後に開始するかを指定するためのプロパティ。

animation-iteration-count（回数・ループ指定）

アニメーションを何回再生するかを指定するためのプロパティ。

animation-direction（再生する方向）

アニメーションを再生する方向を指定するためのプロパティ。
２回以上再生する場合のみ適用されます。

animation-fill-mode（実行前・実行後の状態）

アニメーションの再生前後のスタイルを指定するためのプロパティ。

animation-play-state（一時停止・再生の指定）

アニメーションを再生中か、一時停止かを指定するためのプロパティ。
一時停止された場合、停止した時点の状態で止まります。
再開されたときは、最初からではなく続きから再生されます。

@keyframes（アニメーションの変化の指定）

書き方が何種類かあります。
記載するときはベンダープレフィックス（@-webkit-keyframes、@-moz-keyframes）も追加しましょう。

★★★ 通常の書き方 ★★★
@keyframes name{
    0%{
    }
    100%{
    }
}

★★★ 最後だけ指定しても動く ★★★
@keyframes name{
    100%{
    }
}

★★★ 最初と最後だけ指定 ★★★
@keyframes name{
    from{
    }
    to{
    }
}

★★★ 細かく指定 ★★★
@keyframes name{
    0%{
    }
    25%{
    }    
    50%{
    }
    75%{
    }    
    100%{
    }
}

サンプル

数種類のサンプルを用意してみました。
もし使用される場合は適当に数値や名前を変更してください。

See the Pen
abzprvo by otwo (@otwo)
on CodePen.

※１回のみ再生しているものは、サンプルの右下にある「Rerun」ボタンでご確認いただけます。

transition

ボタンのホバーなどに使用する場合は、transitionのほうが手軽でおすすめです。

テンプレート

animation同様ベンダープレフィックス（-webkit-、-moz-）も追加しましょう。

★★★ １行ずつ書いた場合 ★★★
.con{
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 0s;
}

★★★ まとめて書いた場合 ★★★
.con{
    transition: width 2s linear 0s;
}

★★★ 複数をまとめて書いた場合 ★★★
.con{
    transition: width,background-color 3s,2s ease,linear 0s,0s;
}

種類

transitionの種類は以下になります。

各詳細

transition-property（対象のプロパティ）

trainsitionの対象となるCSSのプロパティ

指定できるプロパティの一覧
※抜けがあればごめんなさい。ここに記載が無くても基本的にCSSスタイルはほぼ指定できるかと思います。

一括指定（ショートハンド）することもできます。

transition-duration（かかる時間）

何秒間でアニメーションさせるかを指定するためのプロパティ。

transition-timing-function（速度）

アニメーションの速度を指定するためのプロパティ。

こちらのstepsもanimationのsteps同様、コマ撮りのアニメーションのように動きます。

transition-delay（何秒後に開始するか）

アニメーションのを何秒後に開始するかを指定するためのプロパティ。

サンプル

数種類のサンプルを用意してみたのでホバーしてみてください。
もし使用される場合は適当に数値や名前を変更してください。

See the Pen
vYEgoYw by otwo (@otwo)
on CodePen.

感想

以上になります。

今回は保存版みたいな形で作成してみましたがお役に立ちそうでしょうか。
自分自身も書いててかなり勉強になりました。

また、今回のサンプルはほぼpx指定でアニメーションさせているのでまだよいのですが、レスポンシブのこととかを考えるともう少し記載が面倒にはなります。
ただ覚えて使いこなせるようになれば、かなり重宝できるのではないでしょうか！

ぜひ試してみてください！