検索
連載

CSS3アニメーションの基本脱エンジニアっぽさ! クライアントの笑顔を引き出すCSS3アニメーション(1)(2/3 ページ)

エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。

PC用表示 関連情報
Share
Tweet
LINE
Hatena

 なお、複数のCSSプロパティを変化させることも可能です。通常のAの状態では幅100pxなのを、マウスオーバしたBの状態のときに幅200pxに広げるようにします。a:hoverのセレクタに「width:200px;」を加え、「transition-property: background」の後ろにカンマを打って、「width」を追加します。

/*ボタンに対して何もしていない状態(A)*/
a{
    display:inline-block;
    color:#fff;
    width:100px;
    padding:10px;
    text-align:center;
    background:blue;
    text-decoration:none;
    /*アニメーション指定*/
    transition-property: background, width;
    transition-duration:1s;
    transition-timing-function:ease-out;
    transition-delay:0.5s;
}
/*ボタンに対してマウスオーバした状態(B)*/
a:hover{
    background:red;
    width:200px;
}
【CSS側】

 非常に簡単ですね。

 しかし、このままでは、ブラウザの種類やバージョンによってはアニメーションが実行されません。なるべく多くのブラウザで動作するよう、transitionプロパティ全てに、ベンダプレフィックスを付けたものを追加します。

/*ボタンに対して何もしていない状態(A)*/
a{
    display:inline-block;
    color:#fff;
    width:100px;
    padding:10px;
    text-align:center;
    background:blue;
    text-decoration:none;
    /*アニメーション指定*/
    /*Firefox向け*/
    -moz-transition-property: background, width;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:ease-out;
    -moz-transition-delay:0.5s;
    /*Chrome、Safari向け*/
    -webkit-transition-property: background, width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:ease-out;
    -webkit-transition-delay:0.5s;
    /*Opera向け*/
    -o-transition-property: background, width;
    -o-transition-duration:1s;
    -o-transition-timing-function:ease-out;
    -o-transition-delay:0.5s;
    transition-property: background, width;
    transition-duration:1s;
    transition-timing-function:ease-out;
    transition-delay:0.5s;
}
/*ボタンに対してマウスオーバした状態(B)*/
a:hover{
    background:red;
    width:200px;
}
【CSS側】

(3)animationの設定方法

 次に、animationの設定方法を学びます。もう一度、AとBの状態を指定しただけのものにスタイルシートを戻します。

/*ボタンに対して何もしていない状態(A)*/
a{
    display:inline-block;
    color:#fff;
    width:100px;
    padding:10px;
    text-align:center;
    background:blue;
    text-decoration:none;
}
/*ボタンに対してマウスオーバした状態(B)*/
a:hover{
    background:red;
}
【CSS側】

 animationで指定できるのは、以下の6つです。

  1. アニメーション名
    アニメーションの変化をまとめた記述に付ける名前
    (例)animation-name:btn;
  2. アニメーションしている時間の長さ(1回分)
    Aの状態からBの状態に変化するのに何秒かけるか
    (例)animation-duration:2s;
  3. アニメーションの速度変化(イージング)
    始めは素早く動くけれども、変化の終盤はゆっくり動くなど、変化する過程にどう抑揚を付けるか
    (例)animation-timing-function:ease-out;
  4. アニメーションを開始するまでの時間
    マウスオーバなどのアクションがあってから、何秒経過してからアニメーションを始めるか
    (例)animation-delay:0s;
  5. アニメーションの繰り返し回数
    アニメーションを何回繰り返すか。「infinite」で無限指定も可能
    (例)animation-iteration-count:1;
  6. アニメーションの繰り返し方法
    アニメーションを、A→B、A→B……と一定方向に繰り返すか、またはA→B→A……と揺りかごのように反転して再生するか。反転再生のときは「alternate」を指定
    (例)animation-timing-function:normal;

 なお、これらは1つにまとめて指定できます。
(例)animation:btn 2s ease-out 0s 1 normal;

 余談ですが、transitionでも同様にまとめて指定できる……はずなのですが、Firefoxで動作しないため、transitionでは個別にCSSプロパティを記載するようにしています。

 さて、これを先ほどのtransitionとは逆に、Bの状態の方に記述します。

/*ボタンに対して何もしていない状態(A)*/
a{
    display:inline-block;
    color:#fff;
    width:100px;
    padding:10px;
    text-align:center;
    background:blue;
    text-decoration:none;
}
/*ボタンに対してマウスオーバした状態(B)*/
a:hover{
    /*アニメーション指定*/
    animation:btn 2s ease-out 0s 1 normal;
    background:red;
}
【CSS側】

 しかし、これだけでは動きません。

 どのタイミングで何をアニメーションさせるかをまとめた「キーフレーム」というものも、スタイルシートの中に追加して設定する必要があります。次のように設定します。

@keyframes アニメーション名 {
0% { アニメーションさせたいCSSプロパティの初期状態 }
100% { アニメーションさせたいCSSプロパティ最終状態 }
}

 今回、背景色を青から赤に変化させたいので、以下のように記述します。

@keyframes btn {
0% {background:blue;}
100% {background:red;}
}

 また、A→Bの状態変化の間に、別の変化を差し挟むこともできます。青から赤に背景色が変化する途中で、黄色になるようにします。

@keyframes btn {
0% {background:blue;}
50% {background:yellow;}
100% {background:red;}
}

 「50%」としている数字を小さくすれば、早く黄色になり、大きくすれば遅いタイミングで黄色になります。

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る