HTML5,CSS3のお勉強 その11 ー animation ー

前回の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ボタン」をクリックするとプレビュー画面に変わります。