ユニファ開発者ブログ

ユニファ株式会社プロダクトデベロップメント本部メンバーによるブログです。

サクッとできるCSSアニメーション（transition）の使い方

AdventCalendar2019

Webデザイナーのmorita（こ）です。今回はCSSのアニメーションについて、ちょこっと書かせていただきました。

ボタン（hover me）

↑こんな感じのよくあるhoverアクションを1行で実現します。

 transition: .◯s;

◯の部分は数字でOK。
.4sとかにすると、0.4秒で実行されるアニメーション、
1sとかであれば、1秒で実行されるアニメーションとなります。

※ここ重要！テストに出ます。
【CSS transitionでアニメーションさせるためのポイント】

・対になるプロパティのbefore/afterを用意すること

上記の例だと、

.btn-sample{
  opacity: 1;
  transition: .4s;
}
.btn-sample:hover{
  opacity: 0.3;
}

変化させているプロパティは「opacity（透明度）」なので、beforeは「opacity: 1;（透明度100%）」、afterは「opacity: 0.3;（透明度30%）」です。このあいだの変化を「transition: .4s;（0.4秒）」かけてアニメーションさせています。

例ではCSSでのhoverアクションでしたが、JSなどでの状態変化（clickとかscroll）にもclassを作成して対応できます。（サンプルでは1回しかできません。。）

ボタン（click me）

.move-sample{
  position: relative;
  left: 0;
  transition: .4s;
}
.move-sample.is-anime{
  left: 60%;
}

clickすると、「is-anime」というclassをつけるようにJS書いてもらって、アニメーションのbefore/afterはCSSで制御する感じです。エンジニアとデザイナーが協業で行う時に重宝するやり方です。（JSはトリガーとして、CSSは表現として実装）

transitionの欠点は

・「display: none;」されているとできない。
・ループとできない。

ということです。 上の問題はよくスマホのハンバーガーメニューとかで遭遇しますね。その場合は画面の外に配置したりして、表示する時に画面内に移動してくるとかの対応をしたりしています。 どうしてもこの問題に対応するなら、CSS animationを使うことになります。（その場合、「サクッと」にならないのでググりましょう。）

【他にも色々できちゃったりするよ】
今回はもっとも短く最小のtransitionアニメーションでしたが、他にも様々な設定を指定することが可能です。
・transition-property　変化させるプロパティを指定（all,opacity,top/leftなど）
・transition-duration　変化させる時間（省略不可、.4sとか秒数を指定）
・transition-delay　変化の開始を遅らせる
・transition-timing-function　イージング（デフォルトはease）

【ブラウザ対応】
IE10以上で実装されているので、ベンダープレフィックスとかもなしでいけるでしょう。

【CSSでアニメーションできる喜び】
少し前まではアニメーションさせるといえば、「JS（jQuery）で」みたいな感じもありましたが、昨今のデザイナーとエンジニアの協業体制を考えると、JSはエンジニア領域、CSSでデザイナー領域として、細部のアニメーションまでを表現（デザイン）できるのが望ましいと感じています。