読了目安時間は約 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で十分です。
では、また。