Tweet

Pocket

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以降