CSS transitionの 使い方・アニメーション

本記事は広告が含まれる場合があります CSS

【CSS transition】transitionの使い方・簡単アニメーション

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

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

ゆっくり遷移といった、簡単なアニメーションであればtransitionが簡単ですよ。今回はtransitionの使い方を説明していきますね。

 

 

transitionの使い方

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

transitionでバーが伸びてオレンジ色になるアニメーション
 

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

transitionプロパティの使い方

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

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

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

■例)マウスオーバー(hover)したときにwidthとbackgroundをアニメーションする
transitionでバーが伸びてオレンジ色になるアニメーション
 

■上記のソースコード

 

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

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

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

 

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

 

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

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

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

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

■上記のソースコード

 

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

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

transitionの詳細プロパティ

「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;」は下記のように記述することができます。

 

transitionがうまく効かないよくある例

transitionがうまく効かないよくある例をいくつかご紹介します。

:hoverに対してtransitionを設定していると戻りがうまくいかない

変化の後hoverに対してtransitionを設定している場合、カーソルを離すとアニメーションなしで元に戻ってしまいます。

:hoverにtransitionを設定してうまくいかない例

■上記のうまくいかない例のソースコード

 

hoverに対してではなく、hoverなしの要素に対してtransitionに設定するとうまくいきます。

transitionでバーが伸びてオレンジ色になるアニメーション
 

 

display:noneを利用しているとtransitionが効かない

display:none→display:blockの切り替えをしている要素に対してtransitionを設定しているとうまくいきません。

表示非表示がうまくいかない例 display:noneを使用
 

■上記のソースコード

これはdisplay:noneは「存在なし」の状態で変化の始まりが定義されないためです。

対策としては、たとえばハンバーガメニューで表示・非表示を切り替える際にtransitionでアニメーションをしたい場合には、display:noneではなく、visibilityとopacityをよく利用することが多いです。
表示非表示がうまくいく例

 

まとめ

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

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

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

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

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

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-CSS