さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS3】アニメーションさせる(@keyframes、animation-name)

Pocket
LINEで送る

CSS3でアニメーションを行う方法をご紹介します。

@keyframesで指定したアニメーションの過程をanimation-nameプロパティで指定して実行することでCSSでアニメーションを行うことが出来ます。

【使用例(css)】

@-webkit-keyframes movie {  // (1)
  0% {
    left:0px;
    color:#FF0000;
  }
  25% {
    color:#B23AEE;
  }
  50% {
    color:#9F79EE;
  }
  75% {
    color:#8968CD;
  }
  100% {
    left:300px;
    color:0000FF;
  }
}

.animation {
  -webkit-animation-name:movie;  // (2)
  -webkit-animation-duration:4s;
  -webkit-animation-iteration-count:10;
  -webkit-animation-direction:alternate;
  position:relative;
  left:0px;
  font-size:30px;
}

【使用例(html)】

アニメーションします

(1)キーフレームでアニメーションの過程を指定します。過程を%で指定して、そのときの状態を指定します。使用例では名前を「movie」として、0%(始点)のときに左の位置を0px、文字の色を赤、100%(終点)で左の位置が300px、文字の色が青になるような過程を指定しています。
(2)animation-nameで実行するキーフレームを指定します。

※現在ではSafari、Chromeのみ実装されており、ベンダープレフィックス「-webkit-」を付けて利用します。

【アニメーションで指定できるプロパティ】
animation-name → 実行するキーフレームを指定
animation-duration → 時間を指定
animation-timing-function → 速度の変化パターンを指定
animation-iteration-count → 繰り返す回数を指定
animation-direction → 繰り返しを指定
alternate → 奇数回目は通常、偶数回数目は逆再生
animation-delay → 遅れて開始する時間を指定
animation → 上記の一括指定

※時間は秒(s)、ミリ秒(ms)で指定します。

【速度の変化パターン】
linear → 一定の速度で変化
ease → 少し減速して開始、少し減速して終了
ease-in → 減速して開始
ease-out → 減速して終了
ease-in-out → 減速して開始、減速して終了

【対応ブラウザ】
Safari4以降、Mobile Safari4以降、Chrome3以降

カテゴリー:HP制作, css

コメントを残す

コメント内容