animation of CSS
CSS でアニメーションをするには、CSS Transition と CSS Animation の2つの機能があります
CSS Transition は、前述で説明したとおり、transform プロパティを利用して単純なアニメーションを表現できます。各プロパティの使いかたは、前述を参照いただき、ここではトリガの付けかたを説明していきます。
CSS Animation は、きめ細かいアニメーションを表現することができます。
CSS でアニメーションをするメリットは、次のように手軽さやパフォーマンスが良いなどが考えられます。
※ アニメーション自体には、JavaScript は不要ですが、キーを押したらアニメーションがはじまるなどのトリガを付与するには JavaScript が必要になってきます。
次のようにシーンごとに CSS アニメーションと JavaScript アニメーションを使い分ける感じでいいかと思います。
次の transition プロパティを利用してアニメーションを表現することができます。
詳しい説明は前述していますので、ここでは割愛して、これらのアニメーションを動かすトリガの設定方法を説明します。
transition プロパティは、CSS で自身を変更できないので、:hoverなどの疑似クラスや JavaScript のイベント関数で、変更する必要があります。
No | プロパティ名 | 説明 |
---|---|---|
01 | transition-duration | 変化が始まって終わるまでの時間を指定します |
02 | transition-property | 変化が適用されるCSSのプロパティを指定します |
03 | transition-timing-function | 変化の度合いを指定します |
04 | transition-delay | 変化が始まる時間を指定します |
05 | transition | 上記の4つのプロパティを一括で指定できる、ショートハンド・プロパティです 下記の順番で指定します。
|
要素にマウスを乗せることにより、アニメーションをはじめます。
[HTML] <div class='box'></div> [CSS] .box { width: 100px; height: 100px; background: #000; transition: all 300ms 0s ease; } .box:hover { background: #ccc; width: 300px; }
リンクをクリックしている間などに、アニメーションをはじめます。
[HTML] <p><a href='#' class='sample'>ダミーリンク(押している間だけアニメーション)</a></p> [CSS] a.sample { >transition: all 300ms 0s ease; } a.sample:active { background: #ccc; width: 300px; }
inputなど、focusした際にアニメーションで変化します。
[HTML] <input name='sample'></input> [CSS] input[name='sample'] { transition: all 300ms 0s ease; } input[name='sample']:focus { background: #222; color: #fff; }
クラス「.movin」に、scale(2)・margin-left 300px を指定しておき、JavaScript にて、ボタン押下でクラス「.movin」を付けたり・外したりします。
[HTML] <div class='box'></div> <button onclick='movin();' >押すと動きます</button> [CSS] .box { width: 100px; height: 100px; transition: all 300ms 0s ease; } .box.movin { transform:scale(2); margin-left: 300px; } [JavaScript] function movin(){ $('.box').toggleClass('movin'); }
「transitionend」を使用して、CSS Transitionを利用したアニメーションの終了時のイベントを取得できます。
「transitionend」で、アニメーション終了のイベントを取得できます。
アニメーション回数:
[HTML] <div class='box'></div> <p>アニメーション回数:<span id='sist'></span></p> [CSS] .box { width: 100px; height: 100px; background: #000; transition: all 300ms 0s ease; } .box:hover { background: #ccc; width: 300px; } [JavaScript] var $box = $('.box'); var $count = $('#sist'); var count = 1; $box.on('transitionend', function(e){ if (e.originalEvent.propertyName === 'width') { $count.text(count++); } });
transitionendイベントはアニメーションを適用したプロパティの数だけイベントが発火するため注意。
デモではbackgroundとwidthをアニメーションさせているため、1回のアニメーションで2回イベントが発火する。
そのため、1回のアニメーションで1回だけ処理を実行したい場合はデモのように特定のプロパティのアニメーション終了時に処理を実行する。
transform でも、アニメーションを実装できますが、もっと細かいアニメーションを表現するには、キーフレームアニメーションを適用できる CSS Animation を利用します。
キーフレームアニメーションとはアニメーションの開始(0%)から終了(100%)までの任意の経過地点にプロパティを指定できるアニメーションのこと。(プロパティを指定した経過地点のことをキーフレームという)
アニメーションの開始(0%)から終了(100%)までの任意の経過地点にプロパティを指定するものです。
次のように記述します。
@keyframe アニメーション名 { 0% {スタート時のプロパティ値} **% {途中のプロパティ値} ??% {途中のプロパティ値} … 100% (終了時のプロパティ値) }
@keyframes の中のプロパティは、負荷の少ない transofrm プロパティで指定すると、よりスムーズなアニメーションをつくることができます。
キーフレームはアニメーションの動きを設定するだけで、キーフレーム単体ではアニメーションはしません。animation プロパティで、キーフレームを呼び出してアニメーションをさせます。
animation プロパティで、アニメーションの動き「@keyframes」を呼び出して、アニメーションの時間や変化のしかたなどを設定して、実際にアニメーションを再生します。
No | プロパティ名 | 説明 |
---|---|---|
01 | animation-name | アニメーションを呼び出します ※必須です! |
02 | animation-duration | アニメーション1回の実行にかける時間を指定します ※必須です! |
03 | animation-timing-function | アニメーションの変化の度合いを指定します |
04 | animation-iteration-count | アニメーションを繰り返す数を指定します |
05 | animation-direction | アニメーションを繰り返す際、アニメーションの方向を反対にする等の指定ができます |
06 | animation-play-state | アニメーションの実行、および停止を指定できます |
07 | animation-delay | アニメーション実行やプロパティ変更の際の待ち時間を指定します |
08 | animation-fill-mode | アニメーション実行後、当該要素のスタイルを元に戻さず、変化したままのスタイルを維持するかどうかを指定できます |
09 | animation | 上記の8つのプロパティを一括で指定できる、ショートハンド・プロパティです |
ベンダープレフィックスを付けないと動作しないブラウザもあるため、最低でも -webkit- は付けるようにしたほうが良いです。
アニメーションを呼び出すプロパティです。
@keyframes で設定したアニメーションの名前のアニメーションを呼び出します。
セレクタ名 { -webkit-animation-name:アニメーション名; animation-name:アニメーション名; }
[HTML] <div class='box'></div> [CSS] .box { width: 100px; } .box.movin { -webkit-animation-name:sample; animation-name:sample; -webkit-animation-duration:2s; animation-duration:2s; ... ここに、次から説明する各 animation プロパティ を記述する } @keyframes sample { 0% {transform:translate(0px,0px) scale(1)} 50% {transform:translate(300px,0px)} 100% {transform:translate(300px,0px) scale(2) rotateZ(180deg)} }
アニメーションにかける時間を指定します。
アニメーションの場合は、この時間は1回の実行にかける時間を意味します。
設定しない場合は、0秒なのでアニメーションしません。
セレクタ名 { -webkit-animation-duration:値;; animation-duration:値;; }
値は、秒数またはミリ秒数で指定します
単位は s または ms になります
指定できる単位 | 秒で換算 |
---|---|
s | 1s は1秒 |
ms | 1ms は1000分の1秒 |
※ 秒数の指定で、0 秒を指定するときは単位も記述してください
アニメーションの変化の度合いを指定できるプロパティです。
セレクタ名 { -webkit-animation-timing-function:値; animation-timing-function:値; }
指定できる値は下記になります
No | 値 | 説明 |
---|---|---|
01 | ease(初期値) | 開始時と終了時は緩やかに変化します |
02 | linear | 開始から終了まで一定に変化します |
03 | ease-in | 開始時は緩やかに変化、終了に近づくと早く変化します |
04 | ease-out | 開始時は早く変化し、終了時は緩やかに変化します |
05 | ease-in-out | 開始時と終了時は、かなり緩やかに変化します |
06 | cubic-bezier (x軸の値, y軸の値, x軸の値, y軸の値) |
変化の度合いを3次ベジェ曲線で指定します |
アニメーションの繰り返し回数を指定するプロパティです
セレクタ名 { -webkit-animation-iteration-count:値; animation-iteration-count:値; }
指定できる値は下記になります
値 | 内容 |
---|---|
infinite | 無限に繰り返します |
数字 | 指定した数値回数だけ繰り返します |
アニメーションの再生方向を指定するプロパティです
セレクタ名 { -webkit-animation-direction:値; animation-direction:値; }
指定できる値は下記になります
値 | 内容 |
---|---|
normal | アニメーションを通常再生します。(0% → 100%) アニメーションがループの場合、再び始め(0%)から再生します。 |
reverse | アニメーションを逆再生します。(100% → 0%) アニメーションがループの場合、逆再生の始め(100%)から再生します。 |
alternate | アニメーションを通常再生します。(0% → 100%) アニメーションがループの場合、通常再生(0% → 100%) → 逆再生(100% → 0%) → 通常再生(0% → 100%) → 逆再生(100% → 0%)といった繰り返し順で再生されます |
alternate-reverse | アニメーションを逆再生します。(100% → 0%) 逆再生(100% → 0%) → 通常再生(0% → 100%) → 逆再生(100% → 0%) → 通常再生(0% → 100%)といった繰り返し順で再生されます |
アニメーションの実行、および停止を指定するプロパティです
セレクタ名 { -webkit-animation-play-state:値; animation-play-state:値; }
指定できる値は下記になります
値 | 内容 |
---|---|
running | アニメーションが実行されます。 |
paused | アニメーションが一時停止されます。 |
[JavaScript] if ($('.box').css('animation-play-state') === 'paused') { $('.box').css('animation-play-state' , 'running'); } else { $('.box').css('animation-play-state' , 'paused'); }
アニメーションが開始するまでの遅延時間を指定するプロパティです
セレクタ名 { -webkit-animation-delay:値; animation-delay:値; }
時間は「animation-duration」と同じく秒数またはミリ秒数で指定します
アニメーション開始前、終了後のアニメーションを指定するプロパティです
セレクタ名 { -webkit-animation-fill-mode:値; animation-fill-mode:値; }
指定できる値は下記になります
値 | 内容 |
---|---|
none | 何も適用されません。 |
forwards | アニメーション終了後にキーフレームアニメーションで指定したプロパティを適用します。 ★⇒アニメーションが終了しても要素はアニメーション終了時(100%)の状態のままになります。※逆再生だったら(0%)の状態のままになります。 |
backwards | アニメーション開始前にキーフレームアニメーションで指定したプロパティを適用します。 ★⇒animation-delay で遅延時間を指定し、アニメーションが開始していなくても要素はアニメーション開始時(0%)の状態になります。※逆再生だったら(100%)の状態になります。 |
both | forwardsとbackwardsの両方を適用したものになります。 |
アニメーション開始まで 2s, @keyframes 0% に 青色、100% に緑色の背景色を設定しています。
@keyframes が transform だけだと、うまく動かない場合があります。その場合は、ダミーで background-color:none など影響がないプロパティを入れます。
今までのプロパティをまとめて指定できるショートハンドプロパティです
animation プロパティの値に下記プロパティの値を指定します
それぞれの値は半角スペースで区切って指定します。
任意の順序で指定できますが、animation-duration、animation-delay プロパティについては、1つ目がanimation-durationプロパティ、2つ目がanimation-delayプロパティに適用されます。
省略した場合は、各プロパティの初期値が適用されます。
セレクタ名 { -webkit-animation:animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-play-stateの値; animation:animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-play-stateの値; }
「animation」を使用して、CSS animationを利用したアニメーションの開始時や終了時のイベントを取得できます。
JavaScriptで取得できるイベントもベンダープレフィックスを付けないと認識しないブラウザもあるため、注意が必要です。
セレクタ.on('transitionend webkitTransitionEnd', function(e) { // 処理 });
アニメーションの変化の度合いを指定できるプロパティ animation-timing-function プロパティで、「cubic-bezier」を利用して自分で任意の動きを設定することができます。
「cubic-bezier」は、変化の進行割合を3次ベジェ曲線で指定します。
3次ベジェ曲線は、以下の図のような4つのコントロールポイント(P0、P1、P2、P3)で定義されます。
P0 が変化の開始ポイント、P3 が変化の完了ポイントで、 横軸が変化継続時間がどこまで経過したのか、縦軸が変化がどの程度実行されたのかを表します。仮に P0→P3 までが直線なら、変化は一定の割合で進行することになります。
P0(開始ポイント)とP3(完了ポイント)は固定なので、 「cubic-bezier」では、P1 と P2 の値を指定することで変化の進行割合を調整します。
...と言っても、なかなか難しくて使いこなせないので、「cubic-bezier」を作成できるツールを!
各コントロールポイントの位置をマイナスまで設定でき、かつデフォルトで設定出来るイージングが豊富でプレビューも見やすく、サンプルソースもついてます。
Chrome の開発者ツールから利用できます。
①chrome ウインドウ上で、右クリック⇒「検証」を選択する
②@keyframes の「animation-timing-function」プロパティを設定している要素を選択
③右側の「Style」欄から、を選択する
イージングはanimation-timing-functionを使って定義しますが、このプロパティはkeyframesの中で再定義が可能です。上手く使えばシンプルなコードで複雑なアニメーションが実装できます。
セレクタ { background-color: red; height: 20px; width: 20px; animation: 'bounce' 2s ease-out 0s infinite alternate; } @keyframes bounce { 0% { margin-top: 100px; animation-timing-function: ease-out; } 25% { margin-top: 50px; animation-timing-function: ease-in; } 50% { margin-top: 100px; animation-timing-function: ease-out; } 75% { margin-top: 75px; animation-timing-function: ease-in; } 100% { margin-top: 100px; } }