【CSSでアニメーション】transitionプロパティの使い方

CSS transitionを利用して手軽なアニメを作成する方法

今回は、CSSのtransitionプロパティを利用して、下記のように手軽にアニメーションを作成する方法を紹介します。
 

 

CSSだけでアニメーションって作れるんですね!Javascriptが必要だと思っていました!
はい!今はCSSだけでもアニメーションが作れます。CSSでは、アニメーションを作るために「animation」プロパティもしくは「transition」プロパティが利用できます。
今回はよりシンプルなtransitionプロパティについて説明していきますね!
 

【メルマガ登録はこちら!!】
HTML・CSS・お役立ち情報をGET

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト

 

 

【PR】ネットショップを始めるなら!無料でスタートできるBASEがオススメ!

transitionの使い方

CSSのtransitionプロパティを利用すると、あるHTML要素の状態の変化をアニメーションとして動作させることができます。
 

下記の水色のブロックにカーソルを合わせてください(スマホの方はタッチしてみてください)。

アニメ

 

3秒間で、右に伸びていって、色が水色からオレンジ色に変化します。カーソルを外すと(スマホの方は別のところにタッチすると)、元に戻っていきます。
 

transitionプロパティの使い方

まず、基本的なtransitionプロパティの使い方を説明します。

CSS アニメーション transitionプロパティの説明
 

transitionプロパティは、「transition: 変化の対象 変化の時間 変化の仕方 (順不同)」を指定します。加えて、変化の終わりの状態となる「:hover」などの擬似クラスと組み合わせて利用するとアニメーションが発生します。
 

■例)マウスオーバー(hover)したときにwidthとbackgroundをアニメーションする

アニメ

 

■上記のソースコード

 

上記例の場合は、下記のように3秒かけてアニメーションを実現しています。

上記例のアニメーションの場合

  • 変化の開始:hoverしていない時のCSS。width:10%とbackground-color:aqua
  • 変化の終了:hoverした時のCSS。width:80%とbackground-color:orange

 

通常、transitionの設定は、変化の終わり(.sapmle:hover)ではなく、変化の始まり(.sample)に記述します。
 

アニメーションに遅延を入れる

CSS アニメーション transitionプロパティの説明 delayを入れた場合

秒数を2つ指定することでアニメーションに遅延を入れることができます。
 

■2秒遅れてからアニメーションがスタートする例

 

■上記のソースコード

 

上記例の場合は「2秒遅延後」に「3秒間のアニメーション」が実行されます。
 

時間に関する順番は「変化の時間」が先、変化の遅延が後で順番を入れ替えることができませんので注意してください。
 

【PR】初めてホームページを作るなら使いやすいロリポップがオススメ!

HTMLを覚えたらサーバーを借りて本番のホームページを作成してみましょう。初めてのホームページを作るならロリポップがオススメ!

transitionの詳細プロパティ

transitionはそれぞれtransition-property、transition-duration、transition-timing-function、transition-delayで別々に記述できる
 

「transition」で変化の対象と変化の秒数と変化の仕方をまとめて指定しましたが、それぞれ個別に指定することができます。
 
    transition-property: all;     transition-duration: 3s;     transition-timing-function: ease;     transition-delay: 2s;

transtionを構成する各プロパティ

  • transition-property:変化対象のCSS
  • transition-duration:変化の開始から終了までの時間
  • transition-delay:変化がいつ始まるか(遅延)
  • transition-timing-function:変化の仕方

 

変化対象のCSSを指定 transition-property

「transition-property」では、変化対象のCSSプロパティを指定できます。
 

transition-property:allで(transition対象の)CSSプロパティを一括で指定できます。
 

transtion-property:background-colorのように指定すればtransitionによるアニメの対象は「background-color」のみになります。
 

変化の時間を指定 transition-duration

「transition-duration」は、変化の開始から終了するまでの時間(秒またはミリ秒)を指定できます。
 

transition-duration:3sにするとアニメーションが3秒間続くことになります。
 

初期値は0でアニメーションにはなりません。負の値は0扱いになります。
 

変化がいつ始まるか(遅延) transition-delay

transition-delayは先ほどの例では使いませんでしたが、変化がいつ始まるかを指定できます。
 

transition-delayプロパティで指定した時間が経過した後にアニメーションが開始されます。省略した場合は初期値は0で変化がすぐに開始されます。
 

変化の仕方 transition-timing-function

「transition-timing-function」で変化の仕方(一定スピードで変化、はじめゆっくりでだんだん速く変化など)を指定します。

 

以下の中から指定方法を選択できます。

transition-timing-function」のよくある設定値

  • ease(開始と終了を滑らかに)
  • linear(一定)
  • ease-in(開始がゆっくり)
  • ease-out(終了がゆっくり)
  • ease-in-out(開始と終了がゆっくり)
  • cubic-bezier(※)

※cubic-bezireはベジェ曲線を4つの変数を指定して設定する方法です。数学の世界に入るためここでは割愛します。
 

上記をまとめると「transition:all 3s 2s ease;」は下記のように記述することができます。

 

【PR】初めてホームページを作るなら使いやすいロリポップがオススメ!

HTMLを覚えたらサーバーを借りて本番のホームページを作成してみましょう。初めてのホームページを作るならロリポップがオススメ!

transitionプロパティのWebブラウザの互換性

transitionというプロパティは昔から存在していたわけではなく、CSS3という比較的新しい規格のなかで生まれました。そのため、一部の古いWebブラウザでは正常に動作しない場合があります。
 

特に、Internet Explororの場合はバージョン10より以前のバージョンは正常に動作しませんのでご注意ください。
 

Chrome、Safari、FireFox、Operaでも古いバージョンの場合は、ベンダープレフィックスという識別子を指定しないと正常に動作しない場合があります。
 

CSS3 transitionのサポートWebブラウザ

CSS3 transitionのサポートWebブラウザ

 

http://caniuse.com/#search=transitionより抜粋
 

ベンダープレフィックスをつけた場合の書き方

  • Chrome/Safariの場合:-webkit-transition
  • FireFox の場合:-moz-transition
  • Operaの場合:-o-transition

 

互換性を気にする場合はCSSにベンダープレフィックスも指定した形式で記述しておくと安定動作につながると思います。
 

 

【メルマガ登録はこちら!!】
HTML・CSS・お役立ち情報をGET

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト

 

まとめ

今回は、CSSのtransitionプロパティを利用して、手軽にアニメーションを作成する方法を紹介しました。
 

transitionプロパティを利用することで、javascriptを利用しなくても手軽なアニメーションが作成できます。
 

 

javascriptがわからなくても手軽に作れますのでぜひ試してみてください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

 

 

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ