CSSでアニメーション

このCSS・・・動くぞ！
をメインタイトルに書いていきます！
他にも書きたいことはいっぱいありますが、
まずはアニメーションで。

アニメーションさせよう

CSSでのアニメーションはCSS3から対応となっています。
簡易的なアニメーションであればCSSだけで対応可能です！

transition

transitionを使うだけでも簡易的なアニメーションは可能です。
まずは下記コードをご覧ください。

See the Pen
translate animation by Katsunari Yamazaki (@trust-k-yamazaki)
on CodePen.

このように簡易的なアニメーションであれば爆速で開発可能なのです。

簡単に内容を説明していきます。

transition: transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値

transition-property

変化を起こす属性を限定できます。（safariですとうまく動作せず。。。今回は省略しています。）

transition-duration

変化の動作時間を設定できます。s（秒）とms（ミリ秒）が設定可能です。

transition-timing-function

変化の動作内容を指定できます。
ここでは簡単なもの（設定だけでOKのもの）を紹介します。
詳しい内容はリンクにしておくので、そちらをご参照ください。

cubic-bezierを使うなら こちら

transition-delay

変化開始までの待ち時間を設定できます。s（秒）とms（ミリ秒）が設定可能です。

transform

要素の位置や形を変化できる属性です。
transitionと組み合わせると複雑な動きにも対応可能です。
3D軌道での変形も可能なのですが、複雑なためここでは2Dでの変形を紹介します。
3Dは最後におまけで書きます！

translate（移動）について

縦横斜めへ移動可能です。

See the Pen
transform:translate animation by Katsunari Yamazaki (@trust-k-yamazaki)
on CodePen.

rotate（回転）について

縦横回転可能です。また要素の上下回転なども可能です。
設定値のdegは角度になります。時計回りはポジティブ反時計回りはネガティブな値を設定してください。

See the Pen transform:rotate animation by Katsunari Yamazaki (@trust-k-yamazaki) on CodePen.

scale（伸縮）について

縦横を指定の比率で引き伸ばしたり縮めたりすることが可能です。

See the Pen transform:scale animation by Katsunari Yamazaki (@trust-k-yamazaki) on CodePen.

skew（傾斜）について

縦横の傾斜を指定可能です。
回転と同じくdeg角度で指定します。

See the Pen RwGoLOz by Katsunari Yamazaki (@trust-k-yamazaki) on CodePen.

キーフレームアニメーションについて

ここまででお腹いっぱいになってませんか？
ここまではまだ朝飯前です。
これからBrakeFirstといきましょう！

またanimation属性を使って要素をアニメーションさせることができます。
試しにマウスを乗せると動く出すアニメーションを作りました。

See the Pen
animation for css by Katsunari Yamazaki (@trust-k-yamazaki)
on CodePen.

それぞれについて説明しましょう。

keyframes

@keyframesはアニメーション定義用の文法です。
開始から終了までのアニメーションを記載することが可能です。

animation: animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-pray-stateの値

animation-name

キーフレームで作ったアニメーションの名称を設定します。

animation-duration

アニメーションの動作時間を設定します。
s（秒）とms（ミリ秒）を設定できます。

animation-timing-function

以下の設定が可能です。
cubic-bezierを使うなら こちら

animation-delay

アニメーション開始までの待機時間が設定できます。

animation-iteration-count

アニメーションの繰り返し回数を指定できます。
infiniteとすることで無限に繰り返すようになります。

animation-direction

アニメーションの実行方向を設定できます。
下記一覧を参照してください。

animation-fill-mode

アニメーション開始前と終了後のスタイルを指定できます。

animation-pray-state

アニメーションの再生・停止を指定できます。

おわりに

つ、疲れました。。。
まあまあかけたんじゃないでしょうか。

あとで私が作ったローダーでも挙げておきます！