UnsplashのNikola Majksnerが撮影した写真

はじめに

CSSでは以下２種類のアニメーション用プロパティが用意されています。

・transitionプロパティ：手軽にシンプルなアニメーションを追加できる
・animationプロパティ：複雑なアニメーションを追加できる

今回はtrantisionのご紹介です。

transitionの概要

transitionの機能を一言で言うと、

「CSSの変化をスムーズする機能」です。

　

:hoverなどの疑似クラスやJavaScriptを使ってクラスを付け替えるなどすると、CSSを動的に変化させることができますが、transitionはこのCSSの変化をスムーズにします。

下はtransition「あり」と「なし」の例です。

:hoverで背景色赤のcssを適用しています。

このようなアニメーションをとても簡単に追加できます。

使い方

transitionの使い方はとても簡単で、CSSに１行追加するだけです。

<style>
.sample{
  width: 100px;
  height: 100px;
  background-color: black;
  transition: all 1s 0s ease;
}
.sample:hover{
  background-color: blue;
}
</style>

<div class="sample"></div>

変化前のCSSに１行（赤字部分）追加するだけでアニメーションを追加できます。

上のように書くと、このように動作します↓↓

書き方

次に書き方についてです。

transition: all  0.5s 0s ease;
             ⓵   ⓶  ⓷  ⓸

　

①適用するCSSプロパティの指定（color, widthなど）

②アニメーションにかける時間。秒で指定

③アニメーション開始のタイミングを何秒遅らせるか

④変化のスピード変化の指定。（一定速度、始めは早く終わりはゆっくりなど）

「④変化のスピード変化の指定」については以下のような値が用意されています。

値	内容
ease	始めと終わりはゆっくり
ease-in	始めはゆっくり、だんだん加速
ease-out	始めは早く、だんだん遅く
linear	一定の早さ

他にも段階的に変化させるstepsや自在に変化させるcubic-bezierなどがあるようです。

詳細が知りたい方は下のリンク先ページをご参照ください。

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function#ease

補足：transitionのもう一つの書き方

transitionは以下のように1行で簡単に書けますが、⓵～⓸を個別に設定するプロパティが用意されています。

transitionは下のように書けることを紹介しましたが、

transition: all  0.5s 0s ease;
             ⓵   ⓶  ⓷  ⓸

⓵～⓸はそれぞれこのプロパティで個別に書くことができます。

⓵：transition-propaty
⓶：transition-duration
⓷：transition-delay
⓸：transition-timing-function

　

以下の2つは同じアニメーションを設定しています。

■transitionプロパティでまとめて設定した場合

transition: all  0.5s 0s ease;

■個別のプロパティで設定した場合

transition-propaty: all;
transition-duration: 0.5s;
transition-delay: 0s;
transition-timing-function: ease;

　

transitionについては以上です。