animationプロパティ
animationプロパティでは、 animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction の6つのプロパティの値を、組み合わせて指定することができます。 省略された値はそれらの初期の値に設定されます。
初期値
animation-nameはnone
(animation-nameプロパティは、要素にキーフレームアニメーションを適用する場合の、 アニメーション名を指定する際に使用します。アニメーションを実行させるには何らかの名前が必要です)
animation-durationは0
(animation-durationプロパティは、要素にキーフレームアニメーションを適用する場合の、 アニメーション一回分の時間の長さを指定する際に使用します。)
animation-timing-functionはease
(アニメーションのタイミング・進行割合を指定する。nimation-timing-functionプロパティの値には、 ease、linear、ease-in、ease-out、ease-in-outの5種類がある)
animation-delayは0
(アニメーションがいつ始まるかを指定する)
animation-iteration-countは1
(アニメーションの繰り返し回数を指定する。再生させたい回数を数字で指定。繰り返しの場合は値にinfiniteを指定する)
animation-directionはnormal
(アニメーションを交互に反転再生させるかどうかを指定。アニメーションを逆再生させたい時はalternateを指定)
作例 ※ベンダープレフィックスはその都度、必要な物を追加していく
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> img { animation-name: anime1; /*必須ーキーフレーム名*/ animation-duration: 2s; /*必須ーアニメーション一回分の時間の長さ*/ animation-timing-function: ease; /*アニメーションのタイミング*/ animation-delay: 2s; /*アニメーションがいつ始まるかを指定*/ animation-iteration-count: infinite; /*アニメーションの繰り返し回数*/ animation-direction:alternate;/*アニメーションを反転再生させるかどうかを指定*/ } @keyframes anime1 { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } </style> </head> <body> <p><img src="../img/01.png"></p> </body> </html>