CSSアニメーションの基礎【Transitionを使ってみる】

ウェブ制作技術

おはようございます、ヒグチです。

ウェブページに動きを付ける方法はいろいろとありますが、
その中でも主流になりつつある、「CSSアニメーション」について書きます。

CSSアニメーションを実装するためのプロパティは大きく分けて2つあります。
「transiton」と「animation」です。

今日は「transiton」の方に触れてみます。

CSS3

CSS Transition

「CSS Transition」は、スタートの値とゴールの値を設定し、その間をスムースに遷移させるものです。

まずはサンプルをご覧ください。カーソルを乗せるとアニメーションします。

See the Pen CSS Transition by daisukehiguchi (@daisukehiguchi) on CodePen.

プログラミング

CSSを見ると、div.boxには、「width:200px」「height:60px」「background-color:green」というスタイルが、あらかじめ定義されています。
加えて「transition:3s all ease 0s」という記述があります。
これが今回の主役「transition」プロパティです。
細かい記述の意味は、後述いたします。

ここでは、transitonを定義した要素に対して、hover時の値を設定することで、アニメーションしながら値を変化させていることを確認していただればと思います。

プログラミング

スタイル記述の役割をまとめると、下記のようになっています。

  • .boxに定義された値・・・transitionのスタート値
  • .box:hoverに定義された値・・・transitonのゴール値

transitonの記述方法

CSSの「transiton」は、実は4つの値をまとめて設定するプロパティです。
上記の例でいうと、「3s」「all」「ease」「0s」がそれぞれ1つずつ別の意味を持つ値です。

transitonで設定できる4つのプロパティの内訳は、下記です。

  • transition-duration:アニメーションにかかる時間
  • transition-property:アニメーションさせるプロパティ
  • transition-timing-function:アニメーションの変化率
  • transition-delay:アニメーション開始の遅れ時間

これらをまとめて指定するのが、「transiton」プロパティというわけです。
ぞれぞれ順不同で記述することができますが、時間に関するプロパティは順序を逆にすることができないので注意が必要です。
すなわち「transition-duration」が先で「transition-delay」が後、この順番は入れ替えることができません。

また、各プロパティは省略することができ、省略した場合はそれぞれデフォルト値が指定されます。

以降で、それぞれのプロパティをもう少し細かく見てみます。

プログラミング

transition-duration

transition-durationは、アニメーションにかかる時間を指定します。
単位は、秒(s)またはミリ秒(ms)です。
デフォルト値は0sです。
上記例だと「3s」と指定しているので、3秒かけてアニメーションを行う、という意味合いになります。

プログラミング

transition-property

transition-propertyは、アニメーションするプロパティを指定します。
デフォルト値は「all」で、この場合は、指定されているすべての値に対してアニメーションが設定されます。
個別のプロパティにアニメーションを設定したいとき、width、height、background-colorなどと対象を指定します。

プログラミング

transition-timing-function

transition-timing-functionは、アニメーションの変化率(変化の具合)を指定します。
デフォルト値はeaseです。

指定できる値は以下です。

  • ease:インとアウトをなめらかに
  • linear:一定
  • ease-in:ゆっくりイン
  • ease-out:ゆっくりアウト
  • ease-in-out:ゆっくりインしてゆっくりアウト
  • cubic-bezier(値, 値, 値, 値):独自に設定

プログラミング

transition-delay

transition-delayは、アニメーション開始のタイミングを指定します。
durationと同様、単位は、秒(s)またはミリ秒(ms)です。
デフォルト値は0sで、すぐにアニメーションが始まります。
0.5sにすると0.5秒後、3sだと3秒後にアニメーション開始となるわけです。

プログラミング

transitionのトリガー

前述のようにtransitionは、スタートの値とゴールの値を設定し、値をなめらかに変化させることでアニメーションを表現します。
そのトリガーとなるもの、つまりアニメーションをスタートさせる方法の代表的な例は、サンプルでも紹介した「hover」を使ったものです。
hoverでは、マウスカーソルが要素に乗っかった時にアニメーションが発生します。

プログラミング

それ以外に、Javascriptを使ってアニメーションを発生させる方法もあります。

Javascriptによるtransition

例えば、class名を追加したり削除したりして、アニメーションさせることができます。

サンプルはこちら。クリックするとアニメーションします。

See the Pen CSS Transition 02 by daisukehiguchi (@daisukehiguchi) on CodePen.

プログラミング

あらかじめCSSで、.boxにアニメーションのスタート値を、それに.onがついた時にアニメーションのゴール値を記述しておきます。
そしてJavascriptでclass名「on」をつけたり消したりして、transitionを発生させているというわけです。

プログラミング

他にも、Javascriptで直接transitionプロパティを記述することもできます。
また、jsなので、クリックだけでなく、イベントもいろいろと設定できます。
cssとjsの組み合わせで、表現の幅が広がりますね。


以上、CSSアニメーションの基本、「transition」プロパティについて説明しました。
CSSの進化はとどまるところをしりませんね!

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。