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 | 実行 |
おわりに
つ、疲れました。。。
まあまあかけたんじゃないでしょうか。
あとで私が作ったローダーでも挙げておきます！