東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2017.07.10

miura

miura

CSSで簡単アニメーション！CSS Transitionの基本をおさらいしよう

Web制作

こんにちは。三浦です。

先日避暑もかねて水族館に行ってきました。今回訪れた水族館では海月の水槽がライトアップされていてブルーのライトがぼんやりと明滅するのですが、それを見ていたらマウスオーバーで点滅するボタンのことを思い出しました。

さて、近年古いIEのサポートがどんどん終了したことでブラウザのサポート状況を気にする機会が減ってきましたよね。そのおかげかCSSでアニメーションを利用する機会が増えてきたように思います。
そこで今回はCSSに記述することで簡単にアニメーションが実現できるCSS Transitionの基本についておさらいしていきたいと思います。

CSS Transitionとは

CSS TransitionはCSS3で新たに追加されたプロパティで、設定された要素に変更が起こった際に、時間的な変化を与えるプロパティになります。
IE9以下には対応していませんがサポートも終了していてシェアもそこまでではないのでCSS3が出た当初より気楽に使えますね。

簡単な記述でリッチなマウスオーバーなどを表現できるので既に一般的ではあると思いますが、個人的な確認も兼ねて紹介していきたいと思います。

まずは簡単な効果をご覧ください。

  • RESULT
  • HTML
  • CSS

  • サンプル1

    カーソルをここに！

    サンプル2

    カーソルをここに！

  • コピー
    
<div id="sample01">
<p>サンプル1</p>
<p class="btn01">カーソルをここに！</p>
<p>サンプル2</p>
<p class="btn02">カーソルをここに！</p>
</div>
  • コピー
    
#sample01 .btn01{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  width: 160px;
  cursor: pointer;
  margin-bottom:30px;
}
#sample01 .btn01:hover{
  background:#FF5151;
}
#sample01 .btn02{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -webkit-transition: 1s ease-in-out;
  width: 160px;
  cursor: pointer;
}
#sample01 .btn02:hover{
  background:#FF5151;
}
  • コピー

サンプルではボタンをマウスオーバーするとbackground-colorの色が変わるようにCSSで設定しています。

サンプル１ではtransitionを設定していないのでマウスオーバーするとbackground-colorが別の色に瞬時に切り替わります。

サンプル２だとこの二色がtransitionで１秒間かけて変化していくようになっています。これがtransitionで設定できる時間的な変化になります。

次項ではCSS Transitionの基本的なプロパティについて説明します。

基本は4つのプロパティ

transitionは4つのプロパティによって構成されています。

transition-property

ここでtransitionを適用するCSSのプロパティを指定できます。
transition-propertyを省略すると要素に指定しているCSSプロパティ全てにtransitionが適用されます。

transition-duration

アニメーションの時間を設定できます。
1つを指定すると全てのプロパティに適用されますが、transition-propertyでプロパティを指定するとその要素のみに適用することができます。
ちなみに単位のsは秒を表しています。

transition-delay

transitionの変化がはじまるまでの時間を設定できます。

transition-timing-function

変化のパターンを選択できます。未設定の場合はeaseが適用されます。

ease

出だしと終わりが滑らかになります。

linear

一定で動きます。

ease-in

出だしがゆっくりになります。

ease-out

終わりがゆっくりになります。

ease-in-out

出だしと終わりがゆっくりになります。

cubic-bezier(数値, 数値, 数値, 数値)

自分で動きを指定できます。

実際に見比べてみましょう。

  • RESULT
  • HTML
  • CSS

  • ease

    カーソルをここに！

    linear

    カーソルをここに！

    ease-in

    カーソルをここに！

    ease-out

    カーソルをここに！

    ease-in-out

    カーソルをここに！

  • コピー
    
<div id="sample02">
<p>ease</p>
<p class="btn01">カーソルをここに！</p>
<p>linear</p>
<p class="btn02">カーソルをここに！</p>
<p>ease-in</p>
<p class="btn03">カーソルをここに！</p>
<p>ease-out</p>
<p class="btn04">カーソルをここに！</p>
<p>ease-in-out</p>
<p class="btn05">カーソルをここに！</p>
</div>
  • コピー
    
#sample02 .btn01{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  width: 160px;
  cursor: pointer;
  margin-bottom:30px;
  transition: 1.5s ease;
  -o-transition: 1.5s ease;
  -moz-transition: 1.5s ease;
  -webkit-transition: 1.5s ease;
}
#sample02 .btn01:hover{
  background:#FF5151;
}
#sample02 .btn02{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  width: 160px;
  cursor: pointer;
  margin-bottom:30px;
  transition: 1.5s linear;
  -o-transition: 1.5s linear;
  -moz-transition: 1.5s linear;
  -webkit-transition: 1.5s linear;
}
#sample02 .btn02:hover{
  background:#FF5151;
}
#sample02 .btn03{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  width: 160px;
  cursor: pointer;
  margin-bottom:30px;
  transition: 1.5s ease-in;
  -o-transition: 1.5s ease-in;
  -moz-transition: 1.5s ease-in;
  -webkit-transition: 1.5s ease-in;
}
#sample02 .btn03:hover{
  background:#FF5151;
}
#sample02 .btn04{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  width: 160px;
  cursor: pointer;
  margin-bottom:30px;
  transition: 1.5s ease-out;
  -o-transition: 1.5s ease-out;
  -moz-transition: 1.5s ease-out;
  -webkit-transition: 1.5s ease-out;
}
#sample02 .btn04:hover{
  background:#FF5151;
}
#sample02 .btn05{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  width: 160px;
  cursor: pointer;
  margin-bottom:30px;
  transition: 1.5s ease-in-out;
  -o-transition: 1.5s ease-in-out;
  -moz-transition: 1.5s ease-in-out;
  -webkit-transition: 1.5s ease-in-out;
}
#sample02 .btn05:hover{
  background:#FF5151;
}
  • コピー

微妙な差に感じられるものもありますが、状況によって使い分けていきましょう。

まとめて設定しても大丈夫

上で紹介した４つのプロパティはひとつの記述にまとめることができます。(ショートハンドラといいます)

transition: background 0.3s ease-in-out 0.5s;

この場合は
transition-property → background
transition-duration → 0.3s
transition-timing-function → ease-in-out
transition-delay → 0.5s

backgroundプロパティに対して0.5秒後に0.3秒をかけて出だしと終わりがゆっくりの変化をするということになります。

記述の順序に関してはtransition-durationをtransition-delayより先に書けば大丈夫です。

background以外にも使ってみましょう

  • RESULT
  • HTML
  • CSS

  • font-size

    カーソルをここに！

    font-color

    カーソルをここに！

    width

    カーソルをここに！

    left

    カーソルをここに！

    border-radius

    カーソルをここに！

  • コピー
    
<div id="sample03">
<p>font-size</p>
<p class="btn01">カーソルをここに！</p>
<p>font-color</p>
<p class="btn02">カーソルをここに！</p>
<p>width</p>
<p class="btn03">カーソルをここに！</p>
<p>left</p>
<div class="btn04_box">
<p class="btn04">カーソルをここに！</p>
</div>
<p>border-radius</p>
<p class="btn05">カーソルをここに！</p>
</div>
  • コピー
    
#sample03 .btn01{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  width: 160px;
  cursor: pointer;
  margin-bottom:30px;
  transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
}
#sample03 .btn01:hover{
    font-size: 20px;
}
#sample03 .btn02{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  width: 160px;
  cursor: pointer;
  margin-bottom:30px;
}
#sample03 .btn02:hover{
  color:#FF5151;
}
#sample03 .btn03{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  width: 160px;
  cursor: pointer;
  margin-bottom:30px;
}
#sample03 .btn03:hover{
  width:240px;
}
#sample03 .btn04_box{
  position:relative;
  height:100px;
}
#sample03 .btn04{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  width: 160px;
  cursor: pointer;
  margin-bottom:30px;
  position:absolute;
  left:0;
}
#sample03 .btn04:hover{
  left:100px;
}
#sample03 .btn05{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  width: 160px;
  cursor: pointer;
  margin-bottom:30px;
}
#sample03 .btn05:hover{
  border-radius: 80px;
}
  • コピー

様々なプロパティに使用できるのもCSS Transitionの魅力のひとつです。

まとめ

CSS Transitionを利用することでリッチなアニメーションがお手軽に実現できます。
今回はマウスオーバーで発動するアニメーションをご紹介しましたが、javascriptを組み合わせたり工夫次第で様々なアニメーションを作る事ができます。
次回はTransitionと併用することでさらに面白いアニメーションが実現できるCSS Transformについてご紹介したいと思います。

また、CSS Transitionを利用したボタン等がHTML、CSSのコピー＆ペーストで簡単に実装できる「Maromaroスタイルレシピ」もご覧いただければCSS Transitionの理解も含まるかなと思いますのでご紹介させて頂きます。

コピペで実装できるCSSの無料テンプレート　Maromaroスタイルレシピ | Maromaro Blog

Web制作

あなたにオススメの記事

  1. 2017.08.16

    CSSで要素を変形！CSS Transformの基本をおさらいしよう～translate、scale編～

  2. 2017.08.17

    CSSで要素を変形！CSS Transformの基本をおさらいしよう～rotate、skew編～

  3. 2017.09.22

    Edgeでマウスオーバーしたボタンのアイコンがちらつく現象の解決方法

  4. 2017.01.16

    脱jQuery初心者！コピペに頼らないプログラミング入門講座～その2 クラスの追加と...

  5. 2017.02.20

    脱jQuery初心者！コピペに頼らないプログラミング入門講座～その3 if文を使った条...

  6. 2018.10.29

    CSSプロパティを書く順番

  7. 2016.12.05

    脱jQuery初心者！コピペに頼らないプログラミング入門講座～その1～

  8. 2019.03.11

    【CSS】インライン要素にアニメーションで下線を引くホバーアクション2種類

TOP » Web制作 » CSSで簡単アニメーション！CSS Transitionの基本をおさらいしよう