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

CSS

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

投稿日:2018年6月27日 更新日:

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


 


CSSだけでアニメーションって作れるんですね!Javascriptが必要だと思っていました!


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

 


 


 

【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にベンダープレフィックスも指定した形式で記述しておくと安定動作につながると思います。
 

 


 

まとめ

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

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


 

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

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


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 


 

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-CSS
-

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.