【コピペOK】transition-durationでふわっとアニメーション【たった一行】

CSS一行でふわっとさせる

ふわっとさせたい要素に下記の一行のcssを書けば、簡単にふわっとアニメーションを実現できます。

実際にお見せしましょう。

通常はhoverしてもカチッと切り替わる感じですよね。

See the Pen sample_NOT-transition-duration by Nanashiro (@nanashiro1988) on CodePen.

こんな感じに。

ですが、a要素にtransition-durationプロパティをつけると……、

See the Pen sample_transition-duration by Nanashiro (@nanashiro1988) on CodePen.

あっという間にちょっとリッチなアニメーションが実装できてしまいますね！

もうこれで満足という方はページを閉じていただいて結構ですが（笑）、仕組みを知りたい方は以下で説明いたします。

なんでふわっとなるの？

transitionプロパティは形や色、位置等の変化に関する設定がおこなえるプロパティ。

transitionプロパティで設定できるのは、

• transition-duration → 変化にかかる時間
• transition-property → 何を変化させるか指定（大きさ？背景色？etc）
• transition-timing-function → 変化の仕方
• transition-delay → 変化の始まるタイミング

の4つ。

今回紹介した一行は、この中のtransition-durationを設定しているわけですが、これは変化にかかる時間を設定できるものなんですよね。

ふわっとならないボタンは、0秒で色の変化をさせているので、いきなりカチッと切り替わるんですよね。

逆に、ふわっとなるボタンの方は、0.3秒かけて色を変化させているので、ふわっ……となります。

（僕の肌感では、0.2〜0.3秒くらいがいい感じのふわっと感です。笑）

という具合に、最低限transition-durationを設定するだけでリッチになるんですよね〜。

細かく設定したい人は

アニメーションを細かく設定したい人は他のものも設定するのが良い思います。

その場合は、transitionプロパティでまとめて設定しちゃうとすごい楽。

例えば、

• 2秒かけて（transition-duration: 1.5s;）
• 横幅だけを（transition-property: width;）
• 開始時はスピーディーに終了時はゆっくり変化させ（transition-timing-function: ease-out;）
• 0.5秒立ってから変化を始めさせる（transition-duration: .5s;）

を、transitionプロパティでまとめて設定すると、

となりますね。楽ちん。

よく分からない人はとりあえず一行で！

普段からWebサイト制作をやっていない人（ブロガーとか）であれば、とりあえずWordPressの追加CSSのところに、

と書いておけば、すべての要素の動きにふわっと感が追加されてリッチになります。