フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

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;
}

という感じです。

まとめ

複雑なアニメーションをさせる場合はJavascriptの出番ですが、簡単なアニメーションならCSSで十分です。

では、また。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる