WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

CSS3「animation」プロパティの使い方

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>