CSS3のアニメーション

最終更新日

CSS3のアニメーション

時間軸の流れを段階的に指定する事が出来るCSS3のアニメーション

 

関連プロパティ

animation …… アニメーションについてまとめて指定する
animation-name …… @keyframes で定義した名前を指定します。(必須)
animation-duration …… アニメーション一回分の時間の長さを指定する(必須)
animation-timing-function …… アニメーションのタイミング・進行割合を指定する(初期値:ease、一定割合 : linear)
animation-iteration-count …… アニメーションの繰り返し回数を指定する(初期値:1、繰り返し : infinite

animation-direction …… アニメーションを交互に反転再生させるかどうかを指定する(normal/alternate)
animation-play-state …… 再生中か一時停止かを指定する(running/paused)
@keyframe animation-name {
○○% { css記述 }
○○% { css記述 }
○○% { css記述 }
}
 
 
 

admin

東京都在住フリーのWebデザイナー、WEB講師

シェアする