1. TOP
  2. リファレンス
  3. CSSのtransisionの使い方まとめ。コピペできるサンプルあり

CSSのtransisionの使い方まとめ。コピペできるサンプルあり

transitionプロパティを使えば、要素の変化に対して時間を設定することが出来流ようになります。

例えば、普段はオレンジでホバーするとブルーに変わるボタンの場合を考えてみます。

特に何も設定しなければ瞬時にブルーに切り替わりますが、transitionプロパティで任意の時間を設定すれば、オレンジ→ブルーへゆっくりとアニメーションしながら変化させることが出来ます。

実際にどのような雰囲気になるかみてみましょう。

 <a id="demo_231-1" class="demo_231" href="">普通のボタン</a>
 <br><br>
 <a id="demo_231-2" class="demo_231" href="">徐々に色が変わるのボタン</a>
 #demo_231-1:hover{
   background-color: royalblue;
 }
 #demo_231-2:hover{
   background-color: royalblue;
   /* transitionの設定 */
   transition: 1.5s;
 }
 /* ボタンの装飾 */
 .demo_231{
   background-color: tomato;
   padding: 10px 20px;
   display: inline-block;
   color: #fff;
   text-decoration:none;
 }

それぞれホバーしてみてください。1つめは瞬時に色が変わりますが、2つ目のボタンはtransition: 1.5s;を設定しているので、1.5秒かけてゆっくりと色が変化します。

transitionのブラウザ対応状況

transitionはCSS3から加わった比較的新しいプロパティです。

とはいっても、追加から何年も経っているのでほとんどのブラウザで対応しており、使用しても問題は有りません。

ベンダープレフィックスに関しても現在は不要と考えてよいでしょう。

下記のように、対応状況を調べてみるとほとんどのブラウザで対応されていることがわかります。

Image

https://caniuse.com/#feat=css-transitions

transisionの使い方

transitionは4つのプロパティに分かれています。それぞれ個別に設定すこともできますし、まとめて1つのプロパティで設定することもできます。

transisionの種類

  • ransition-property
    アニメーションを適用するプロパティを指定します。
  • transition-duration
    アニメーションの時間を指定します。
  • transition-timing-function
    アニメーションのアニメーションの加速度を指定します。
  • transition-delay
    アニメーションが始まるまでの時間を指定します。
  • transition
    上記の4つのプロパティをまとめて指定できるショートハンドプロパティです。

transition-property

transition-propertyは、アニメーションを適用するプロパティを指定する事ができます。

transition-property:値;

値には、指定するプロパティ名や、noneやallなどのキーワードを指定する事もできます。

  • none…アニメーションを行いません。
  • all…初期値です。すべてのプロパティを対象にします。
  • プロパティ名…transitionを適用するプロパティを指定します。カンマ区切りで複数指定できます。

例えば、transtion-property:background-colorというふうに設定すれば、背景色にだけアニメーションをかけることが出来ます。

transtion-propertyには文字色や、横幅・高さなどあらゆるプロパティを設定することが出来ますが、背景画像(background-image)や線形グラーデーション(liner-gradient)、円形グラーデーション(radial-gradient)は設定することが出来ないので注意しましょう。

実際に例を見てみましょう。

<p id="demo_232">test</p>
 #demo_232 {
   width:50px;
   height: 30px;
   background-color:tomato;
   transition-property:width;
   transition-duration: 2s;
   padding: 10px 20px;
 }
 #demo_232:hover {
   width:300px;
   height: 100px;
 }

test

ホバーで横幅と高さが変わるようにCSSを設定しました。transition-property:width;によって、アニメーションを行うプロパティを横幅に設定しているため、横幅はアニメーションしながら大きくなりますが、高さは瞬時に大きくなるのが確認できます。

transition-duration

transition-durationは、アニメーションにかける時間を指定できるプロパティです。

設定された時間アニメーションが続きます。例えば、transition-duration:2sとすると2秒かけてアニメーションします。

transition-duration:時間;

時間は秒数または、ミリ秒で指定します。

  • s
    秒1s=1秒
  • ms
    ミリ秒1ms=1000分の1秒

初期値は0でアニメーションがありません。

アニメーションの時間を変えた例を見てみましょう。

 <p id="demo_233-1" class="demo_233">0</p>
 <p id="demo_233-2" class="demo_233">1s</p>
 <p id="demo_233-3" class="demo_233">2s</p>
 #demo_233-1{
    transition-duration: 0s;
 }
 #demo_233-2{
    transition-duration: 1s;
 }
 
 #demo_233-3{
    transition-duration: 2s;
 }
 
 /* 共通の装飾 */
 .demo_233 {
    width:50px;
    height: 30px;
    background-color:tomato;
    transition-property:width;
    padding: 10px 20px;
  }
 .demo_233:hover {
    width:300px;
  }

0

1s

2s

transition-durationにそれぞれ0、1秒、2秒を設定しているので、ホバーしてみてください。アニメーションの時間が変わるのがわかると思います。

時間を長くすると、それだけゆっくり動くことになるので、極端に長いとユーザーにストレスを与えてしまいます。実際には1秒くらいが上限かなと思います。

transition-timing-function

transition-timing-functionは、アニメーションの加速度を指定するプロパティです。

transition-timing-function:値;

値には用意されたキーワードを指定します。キーワードには下記のようなものがあります。

ここにタイトル

  • ease(初期値)
    初期値です。始めと最後はゆっくり変化します。
  • linear
    始めから最後まで一定速度で変化します。
  • ease-in
    始めはゆっくり変化、最後は早く変化します。
  • ease-out
    始めは早く変化し、最後はゆっくり変化します。
  • ease-in-out
    始めと最後は、かなりゆっくり変化します。
  • cubic-bezier
    変化の度合いを数値で指定します。カスタマイズ性に優れますが、少しややこしい指定方法です。初級者向けの記事ですので詳細は省きます。

雰囲気を掴むためにも、実例を見てみましょう。

 <p id="demo_234-1" class="demo_234">ease</p>
 <p id="demo_234-2" class="demo_234">linear</p>
 <p id="demo_234-3" class="demo_234">ease-in</p>
 <p id="demo_234-4" class="demo_234">ease-out</p>
 <p id="demo_234-5" class="demo_234">ease-in-out</p>
 #demo_234-1{
   transition-timing-function:ease;
 }
 
 #demo_234-2{
   transition-timing-function:linear;
 }
 
 #demo_234-3{
   transition-timing-function:ease-in;
 }
 
 #demo_234-4{
   transition-timing-function:ease-out;
 }
 
 #demo_234-5{
   transition-timing-function:ease-in-out;
 }
 
 /* 共通の装飾 */
 .demo_234 {
    width:100px;
    height: 30px;
    background-color:tomato;
    transition-property:width;
   transition-duration: 1s;
    padding: 10px 20px;
  }
 .demo_234:hover {
    width:300px;
  }

ease

linear

ease-in

ease-out

ease-in-out

それぞれに動き方に特徴があるのがわかります。

transition-delay

transition-delayは、アニメーションが始まるまでの時間を指定します。

例えば3秒を指定すれば、3秒後にアニメーションがスタートします。下記のように記述します。

transition-delay:値;

値にはtransition-durationと同じように、秒数またはミリ秒を指定します。

実際の例を見てみましょう。

 <p id="demo_235-1" class="demo_234">0</p>
 <p id="demo_235-2" class="demo_234">1s</p>
 #demo_235-1{
   transition-delay:0s;
 }
 
 #demo_235-2{
  transition-delay:1s;
 }
 
 /* 共通の装飾 */
 .demo_235 {
    width:100px;
    height: 30px;
    background-color:tomato;
    transition-property:width;
   transition-duration: 1s;
    padding: 10px 20px;
  }
 .demo_235:hover {
    width:300px;
 }

0

1s

一つはtransition-delayを0にしているので、ホバーすると即座にアニメーションが始まります。もう一方は1sにしているので、ホバーしてから1秒後にアニメーションが始まります。

transition

transitionはここまでに紹介した、「transition-property、transition-duration、transition-timing-function、transition-delay」の4つのプロパティをまとめて指定できるショートハンドプロパティです。

まとめて書いた方がコードの量は少なくなるので、この書き方をマスターしておくと便利です。下記のように記述します。

transition: transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値

ショートハンドで指定する場合は、それぞれのプロパティを半角スペースで区切って指定します。また順序は下記の通りに記述します。

  • transition-propertyの値
  • transition-durationの値
  • transition-timing-functionの値
  • transition-delayの値

複数指定する方法

複数のプロパティにtransitionを適用したい場合は、カンマ区切りで指定します。

transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値 ,transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;
4つのプロパティのうち、初期値のままでいい場合は省略しても構いません。また、秒数を指定した場合、1つめの値は transition-duration として解釈され、2つめの値は transition-delay として解釈されます。

例を見てみましょう。

 <p id="demo_236-1" class="demo_236">01</p>
 <p id="demo_236-2" class="demo_236">02</p>
 #demo_236-1{
   transition:all 1s ease 0s;
 }
 #demo_236-2{
   transition:1s;
 }
 
 /* 共通の装飾 */
 .demo_236 {
   width:100px;
   height: 30px;
   background-color:tomato;
   transition-property:width;
   transition-duration: 1s;
   padding: 10px 20px;
  }
 .demo_236:hover {
   width:300px;
   background-color: royalblue;
 }

01

02

2つの例を記述しました。1つ目は transition:all 1s ease 0s;ですので、全てのプロパティを対象に、1秒のアニメーションを、easeでかけています。待ち時間は0秒です。

このようにショートハンドプロパティを使うと1行でかけてしまうのでとても楽ですね。さらに、all, ease, 0sはそれぞれのプロパティの初期値でもあるので、省略が可能です。

2つ目の例に書いたようにtransition:1s;とだけ記述すれば、1つ目の例と同じように動作します。

コピペで使えるアニメーションボタンサンプル

transitionを使ってボタンのアニメーションを作成すると、ふわーーと変化するのでユーザーに心地よさを感じさせることができので、積極的に使っていきたいとこです。

いくつか簡単なボタンのサンプルを作ってみますので、参考にしてみてください。

徐々に色が変わるのボタン

 <a id="demo_237-1" class="demo_237" href="">徐々に色が変わるのボタン</a>
 #demo_237-1:hover{
   background-color: royalblue;
   transition: 1s;
 }
 /* ボタンの装飾 */
 .demo_237{
   background-color: tomato;
   padding: 10px 20px;
   display: inline-block;
   color: #fff;
   text-decoration:none;
 }
 

徐々に透明に変わるボタン

<a id="demo_238"href="">徐々に透明に変わるボタン</a>
 #demo_238:hover{
   opacity: 0.5;
   transition: 1s;
 }

 /* ボタンの装飾 */
 #demo_238{
   background-color: tomato;
   padding: 10px 20px;
   display: inline-block;
   color: #fff;
   text-decoration:none;
 }
 

境界線になるボタン

<a id="demo_239" href="">境界線になるボタン</a>
 #demo_239:hover{
   border: 1px solid tomato;
   background-color: #fff;
   color: tomato;
   transition: 0.5s;
 }
 
 /* ボタンの装飾 */
 #demo_239{
   background-color: tomato;
   padding: 10px 20px;
   display: inline-block;
   color: #fff;
   text-decoration:none;
 }