| 前回のcssプロパティ transition はマウスオーバーの時に変化するアニメーションでしたが、今回は自動で変化するアニメーションの作成です |
animationとtransitionでは大きな違いがあります。大きな違いは下の２つですが、animationでは変化の仕方に細かい設定ができます。
| 項目 | animation | transition |
|---|---|---|
| 開始のきっかけ | 自動 | マウスオーバー |
| 繰返し | 可能 | できない |
animationのプロパティはたくさん設定が可能らしいが、ここでは以下の6点に絞って実行した
- animation-name animationの名前、@keyframesで使用
- animation-duration 1回の実行にかける時間
- animation-timing-function 実行中の変更速度
- animation-iteration-count 繰り返しの数(infiniteは無限)
- animation-direction (alternateは方向を反転させる)
- animation-delay 実行の際のスタート待ち時間
See the Pen OmYdRr by tsuyoshi chiba (@yokopook24) on CodePen.
上の埋め込み画像の説明：
「HTMLボタン」をクリックするとHTMLソースコード画面に変わります。
「CSSボタン」をクリックするとCSSソースコード画面に変わります。
「Resultボタン」をクリックするとプレビュー画面に変わります。