【CSS3】アニメーションさせる(@keyframes、animation-name)
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以降
コメントを残す