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のもの）を紹介します。
詳しい内容はリンクにしておくので、そちらをご参照ください。

属性値名	説明
ease	開始時と終了時は緩やかに変化する
linear	開始から終了まで一定に変化する
ease-in	開始時は緩やかに、終了に近づくと早く変化する
ease-out	開始時は早く、終了に近づくと緩やかに変化する
ease-in-out	開始時と終了時はかなり緩やかに変化する

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を使うならこちら

属性値名	説明
ease	開始時と終了時は緩やかに変化する
ease-in	開始時は緩やかに、終了に近づくと早く変化する
ease-out	開始時は早く、終了に近づくと緩やかに変化する
ease-in-out	開始時と終了時はかなり緩やかに変化する
linear	開始から終了まで一定に変化する
step-start	開始時に最終の状態になる
step-end	終了時に最終の状態になる

animation-delay

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

animation-iteration-count

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

animation-direction

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

属性値名	説明
normal	毎回、順方向のみの繰り返しとなる
reverse	毎回、逆方向のみの繰り返しとなる
alternate	順方向、逆方向が交互に行われる
alternate-reverse	逆方向、順方向が交互に行われる

animation-fill-mode

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

属性値名	説明
none	アニメーションで指定したスタイルは適用されない
forwards	終了時のスタイルが終了後も適用される
backwards	開始時のスタイルが開始前にも適用される
both	forwards と backwards がどちらも適用される

animation-pray-state

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

属性値名	説明
paused	停止
running	実行

おわりに

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

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