CSS「transition」プロパティでアニメーション

読了目安時間は約 5 分です。

Webサイトを見ていると、マウスホバーで色が変わったり動いたりするボタンをよく見かけます。「こんなアニメーションを、自分のサイトにも取り入れたいな」と思ったことはありませんか？

CSSだけで簡単にアニメーションができるんです。

今回はそのひとつ「transition」プロパティをご紹介します。

transitionプロパティとは

transition（トランジション）とは「変化」という意味で、指定できるのは以下の通りです。

transition-property：変化を適用するCSSのプロパティを指定
transition-duration：変化の時間を指定
transition-delay：変化が始まる時間（遅延）を指定
transition-timing-function：変化の緩急を指定
transition：上記4つをまとめて指定

順番に見ていきましょう。

transition-property

どのプロパティ変化させるかを指定します。

transition-property:all

全てのプロパティが変化します。色も大きさも全部まとめて変化させるときに使用します。

transtion-property:color

colorだけ変化します。カンマ区切りで複数指定もできます。

transition-duration

変化が始まってから終わるまでの時間を指定します。

transition-duration:○s

○秒かけてアニメーションします。0.1など小数も指定可能です。

transition-delay

変化が始まる時間を指定します。遅延させたいときに使用します

transition-delay:○s

○秒後からアニメーションします。これも0.3など小数指定が可能です。

省略した場合は即アニメーションします。

transition-timing-function

変化の仕方を指定します。たとえば「一定のスピードで変化する」「最初は急に変化し、だんだんゆっくり変化する」など、アニメーション自体に緩急をつけます。

指定方法は以下の通りです。

ease：最初と最後はゆっくり変化
linear：一定に変化
ease-in：最初はゆっくり、だんだん早く変化
ease-out：最初は早く、だんだんゆっくり変化
ease-in-out：easeより最初と最後がゆっくり変化
cubic-bezier：より複雑な変化を指定できます（難解なので割愛）

動きが一定だと無機質に感じるので、easeなどで変化をつけると自然なアニメーションになります。ただし、もっさりする場合もありますので、いろいろ試してみましょう。

transition

上記4つのプロパティをまとめて指定します。

順番は

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

です。たとえば

.transition-sample1 {
    width:10px;
    background-color:#ff0000;
    transition:all 3s 0.5s ease-in-out;
}
.transition-sample1:hover {
    width:300px;
    background-color:#000000;
}

カンマ区切りで複数のプロパティを指定もできます。

たとえば、

.transition-sample1 {
    width:10px;
    background-color:#ff0000;
    transition:width 3s 0.5s ease-in-out, background-color 5s 0s linear;
}
.transition-sample1:hover {
    width:300px;
    background-color:#000000;
}

という感じです。