CSSアニメーションについて
スポンサードリンク
こんばんは、
ケートミィ・メディアラボの富田です。
ここ最近CSSアニメーションを使用する案件がいくつか入ってきたので、これを機に少し研究してみようと思いました。
CSS3になってから、従来はJavascriptやFLASHなどを使って表現していた動的な処理がスタイルシートのみで表現できるようになりました。
CSS3でのアニメーション表現にはtransitionとanimationという2つの役割の違うプロパティがあるのですが、それぞれ作動する（発火する？）条件が異なっています。
- transition・・・マウスオーバーやクリックなどのユーザーのアクションで動くアニメーション、
スムーズにリストが開いたり、動的なメニューでよく使われています。 - animation・・・ブラウザが開いた時に自動的に再生が始まるアニメーション、
再生回数の指定や、アニメーションを別に設定してキーフレームの指定が可能です。
animationプロパティはわかりやすく言えば、transitionが多機能になったものと考えて頂ければ良いかと思いますが、同一のセレクタに両方を設定してしまわないように注意は必要になりそうです。
今回はテストとしてanimationプロパティを使用した下記のようなCSSアニメーションを作成してみました。
矩形がズームを繰り返すシンプルな構造のものですが、使用したパーツはすべてCSSを使用しています。
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>endless-loop</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="rect-loop1"></div> <div id="rect-loop2"></div> <div id="rect-loop3"></div> </div> </body> </html>
スタイルシート
@charset "utf-8";
*,html{
margin:0;
padding:0;
height:100%;
}
body{
height:100%;
}
#container{
height:100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0f143f+7,39afdd+100 */
background: #0f143f; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #0f143f 7%, #39afdd 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #0f143f 7%,#39afdd 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #0f143f 7%,#39afdd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f143f', endColorstr='#39afdd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
position:relative;
overflow:hidden;
}
/*-------------------------------------------
アニメーション部
-------------------------------------------*/
#rect-loop1{
position:absolute;
width:60%;
height:60%;
top:20%;
left:25%;
border:solid 1px #FFF;
animation:wormhole1 3s 0s;
-webkit-animation:wormhole1 3s 0s;
-moz-animation:wormhole1 3s 0s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
margin:auto;
transform: scale(0,0);
}
#rect-loop2{
position:absolute;
width:60%;
height:60%;
top:20%;
left:25%;
border:solid 1px #FFF;
animation:wormhole1 3s 1000ms;
-webkit-animation:wormhole1 3s 1000ms;
-moz-animation:wormhole1 3s 1000ms;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
margin:auto;
transform: scale(0,0);
}
#rect-loop3{
position:absolute;
width:60%;
height:60%;
top:20%;
left:25%;
border:solid 1px #FFF;
animation:wormhole1 3s 2000ms;
-webkit-animation:wormhole1 3s 2000ms;
-moz-animation:wormhole1 3s 2000ms;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
margin:auto;
transform: scale(0,0);
}
/*CSS Animation*/
@keyframes wormhole1 {
from {left:18%;top:18%;opacity:0; transform: scale(0,0);}
25% {left:21%;top:25%;opacity:0.5; transform: scale(0,0);}
50% {left:27%;top:20%;opacity:1;}
50% {left:15%;top:15%;opacity:1;}
to {left:20%;top:20%;opacity:0; transform: scale(1.5,1.5)}
}
-webkit-@keyframes wormhole1 {
from {left:18%;top:18%;opacity:0; transform: scale(0,0);}
25% {left:21%;top:25%;opacity:0.5; transform: scale(0,0);}
50% {left:27%;top:20%;opacity:1;}
50% {left:15%;top:15%;opacity:1;}
to {left:20%;top:20%;opacity:0; transform: scale(1.5,1.5)}
}
-moz-@keyframes wormhole1 {
from {left:18%;top:18%;opacity:0; transform: scale(0,0);}
25% {left:21%;top:25%;opacity:0.5; transform: scale(0,0);}
50% {left:27%;top:20%;opacity:1;}
50% {left:15%;top:15%;opacity:1;}
to {left:20%;top:20%;opacity:0; transform: scale(1.5,1.5)}
}
次に上記コードのポイントを解説してみます。
ポイント1
animation:wormhole1 3s 0s;
animationのプロパティの値は順番でanimation-name、animation-duration、animation-timing-function、animation-deray、animation-iteration-count、animation-directionをスペース区切りで記述できます。
例えば、animation-nameにanimeを設定した5秒の1回切りで再生終了する2000ミリ秒ディレイの掛かったアニメーションプロパティを作成する場合は以下のようになります。
animation:anime 5s 2000ms 1;
animation-name→animation-duration→animation-deray→animation-iteration-countの順に読み込まれているのがわかると思います。
animation-iteration-count:infinite;
初期値は1回のみですが上記のように指定すると無限に再生することが可能になります。
残るはanimation-timing-function、animation-directionという値ですがこれはそれぞれアニメーションのイーズのかかり方を調整するものと、アニメーションの再生/逆再生を制御する値になっているそうです。イーズのかかり方に関しては数多くの値があるようなので詳しく調べて見る必要がありそうです。
ここまで来て気になるのがanimation-nameとはなんぞや、ということなんですが、実はanimationプロパティはキーフレームの設定を@keyframesという処理で別枠で記述する形式になっています。
@keyframes wormhole1 {
from {left:18%;top:18%;opacity:0; transform: scale(0,0);}
25% {left:21%;top:25%;opacity:0.5; transform: scale(0,0);}
50% {left:27%;top:20%;opacity:1;}
50% {left:15%;top:15%;opacity:1;}
to {left:20%;top:20%;opacity:0; transform: scale(1.5,1.5)}
}
ポイント2
@keyframes wormhole1 {
ページが読み込まれる際に、animationプロパティに記述したanimation-nameと同一名のkeyframesが読み込まれます。
@keyframessの後に空白を置いて固有の名前を、大括弧の中にアニメーションさせる対象のプロパティを記述します。
from {left:18%;top:18%;opacity:0; transform: scale(0,0);}
25% {left:21%;top:25%;opacity:0.5; transform: scale(0,0);}
50% {left:27%;top:20%;opacity:1;}
50% {left:15%;top:15%;opacity:1;}
to {left:20%;top:20%;opacity:0; transform: scale(1.5,1.5)}
@keyframes以下の大括弧内に記述したプロパティなのですが、キーフレームをfromからtoまでをパーセンテージで記述する形式になっています。
最も少ないキーフレームではfrom（0%）、to（100%）の2キーのみで使用することが可能です。
その間の1～99%までを任意の区切りではさむことが出来ますが、アニメーションの始め（0％かfrom）と終わり（100％かto）のいずれかでも記述されていないものはエラーと見なされるようです。
アニメーション出来ないプロパティについては記述しても無視されますが、keyframesはほとんどのプロパティに適用させることが出来るようです。
また、上記のように途中のキーフレームに書き込まないプロパティがある場合は、その部分が自動的にモーション補完されます。
以上のように色々な使い道が想像できるプロパティですが、ブラウザによっては対応していない場合があるので、ベンダープレフィックス等注意が必要になるかも知れません。
今回テストで用意したテストページは以下のURLから確認出来ますので、
是非ご参考ください。
（https://k-103i.com/anime/endless-loop1/index.html）
コメントを書く