【HTML＆CSS入門】transitionの使い方

こんにちは！

今回は要素の変化をアニメーションとして表示するtransitionについて紹介します。

transitionプロパティ

要素の特定のCSSプロパティのスムーズな変化を表現します。
ボタンにマウスポインタ―を載せるなどすると、ボタンの大きさが変わることがありますよね？
そのようなアニメーションを簡単にCSSで表現できます。

transitionは、一括でプロパティを設定する方法と、それぞれプロパティを設定する方法があります。

transition
trainsition-delay
trainsition-duration
trainsition-property
trainsition-timing-function

transition

transition-property、 transition-duration、 transition-timing-function、 transition-delay の一括指定プロパティです。

以下のように、それぞれのプロパティを半角スペースをあけて、一括でします。

セレクタ{
  transition: transition-property transition-duration transition-timing-function transition-delay;
}

セレクタ{

transition: transition-property transition-duration transition-timing-function transition-delay;

}

例としては以下のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: width 1s ease-in-out 1s;
    }

    div:hover {
      width: 200px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

transition: width 1s ease-in-out 1s;

}

div:hover {

width: 200px;

}

</style>

</head>

<body>

</body>

</html>

画面上に100pxの赤い正方形が表示され、それにマウスポインタをあてるとゆっくりと200pxになります。

この状態の変化がtransitionの効果です。

この一括指定した各プロパティ値は単体でも指定可能です。
値の説明を含め、各プロパティを紹介していきたいと思います。

transition-property

変化をさせるプロパティを指定します。
指定方法は

all
none
プロパティ名

です。

all

すべてのプロパティという意味で、例えばhoverした際に、背景色、サイズなどすべてのプロパティに変化を適用する際に使用します。

none

どのプロパティも変化の対象外となります。

プロパティ名

変化を適用するプロパティ名を指定します。
カンマ区切りで複数指定すること可能です。

transition-duration

プロパティの変化にかかる時間を指定します。

transition-duration: 1s;

1	transition-duration: 1s;

とすると、１秒かけて変化するという意味になります。

transition-timing-function

トランジション中の加速を定義することができます。
変化の初めは速く、最後は遅くというような指定が可能です。

値の指定方法は↓のとおりです。

ease　      //開始時と終了時は緩やかに変化します。（初期値）

linear　    //開始から終了まで一定に変化します。　　　

ease-in　   //開始時は緩やかに変化、終了に近づくと早く変化します。

ease-out　  //開始時は早く変化し、終了時は緩やかに変化します。

ease-in-out //開始時と終了時は、かなり緩やかに変化します。

cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) //変化の度合いを3次ベジェ曲線で指定します。

ease　 //開始時と終了時は緩やかに変化します。（初期値）

linear　 //開始から終了まで一定に変化します。　　　

ease-in　 //開始時は緩やかに変化、終了に近づくと早く変化します。

ease-out　 //開始時は早く変化し、終了時は緩やかに変化します。

ease-in-out //開始時と終了時は、かなり緩やかに変化します。

cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) //変化の度合いを3次ベジェ曲線で指定します。

transition-delay

変化の遅延を指定します。５秒後に変化させたいなど、遅らせて変化させたい場合に使用します。

transition-delay: 5s;

1	transition-delay: 5s;

以上がtransitionプロパティについての説明になります。

実際にマウスオーバーした際に、３秒後に枠が広がるものを作成したいと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      transition-property: width;
      transition-duration: 1s;
      transition-timing-function: ease-out;
      transition-delay: 3s;
    }

    div:hover {
      width: 500px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

transition-property: width;

transition-duration: 1s;

transition-timing-function: ease-out;

transition-delay: 3s;

}

div:hover {

width: 500px;

}

</style>

</head>

<body>

</body>

</html>

抜粋しますと、

      transition-property: width;  // 要素の幅を変化
      transition-duration: 1s;     // 変化する時間
      transition-timing-function: ease-out; // 開始時は早く変化し、終了時は緩やかに変化。
      transition-delay: 3s;        // 3秒後に開始

transition-property: width; // 要素の幅を変化

transition-duration: 1s; // 変化する時間

transition-timing-function: ease-out; // 開始時は早く変化し、終了時は緩やかに変化。

transition-delay: 3s; // 3秒後に開始

いかがだったでしょうか？
transitionを使えば、簡単にアニメーションが作れます。
アニメーションを使えば、webサイトのレイアウトなどの工夫の幅が広がるのではないでしょうか？
transitionの他にもアニメーションの方法があるので、後日、記載しようと思います。