【サンプルあり】CSSだけでアニメーションが作れるtransitionプロパティ
CSSのtransitionプロパティを使えば、JavaScript(jQuery)なしでもカンタンにアニメーションを実装することができます。
当サイトには、広告が含まれているページがあります。
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
transition
基本の使い方
transitionは、指定したプロパティの値を滑らかに変化させてくれるCSSプロパティです。
サンプル
以下は、hover時に1秒かけて背景色（background-colorプロパティ）が変わるa要素のアニメーションです。
1sは1秒(1 second)を表しています。
a{
text-decoration: none;
font-size: 25px;
padding: 15px 20px;
border-radius: 5px;
color: #FFF;
background-color: #3e6296;
}
a:hover{
background-color: #4de1f7;
/* 1秒かけてbackground-colorの値を変化させる */
transition: background-color 1s;
}
複数プロパティの指定
transitionプロパティの値を半角カンマで区切ることによって、複数のプロパティにアニメーションをつけることができます。
サンプル
hover時に1秒かけて文字色（color）と背景色（background-color）が変わるa要素のアニメーションです。
a{
text-decoration: none;
font-size: 25px;
padding: 15px 20px;
border-radius: 5px;
color: #FFF;
background-color: #3e6296;
}
a:hover{
color: #3e6296;
background-color: #4de1f7;
/* 1秒かけてcolorとbackground-colorの値を変化させる */
transition: color 1s, background-color 1s;
}
transitionのバリエーション
transitionプロパティは、以下4つのプロパティのショートハンド（複数プロパティをまとめて表記する方法）です。
・transition-property：プロパティの指定
・transition-duration：アニメーション時間の指定
・transition-delay：アニメーション開始までの時間を指定
・transition-timing-function：アニメーションの緩急を指定
これまで紹介したサンプルでは「transition-property」と「transition-duration」のみを設定した内容でした。
改めてここから一つ一つを見ていきます。
transition-property
アニメーションの対象となるプロパティを設定します。
/* background-colorをアニメーションさせる */
a:hover {
transition-property: background-color;
}
transition-duration
アニメーションの時間を設定することができます。
・単位はs(second=秒)もしくはms(millisecond = ミリ秒)です。
・「0.5s」のように小数値も設定できます。
・「0.5s」は「.5s」のように省略表記することができます。
/* background-colorを0.5秒かけてアニメーションさせる */
a:hover {
transition-property: background-color;
transition-duration: .5s;
}
transition-delay
アニメーションの開始時間を設定することができます。
/* hoverしてから1秒後に、background-colorを0.5秒かけてアニメーションさせる */
a:hover {
transition-property: background-color;
transition-duration: .5s;
transition-delay: 1s;
}
transition-timing-function
アニメーションの緩急を設定することができます。以下、代表的な設定値です。
・ease：始めと終わりがゆっくり（デフォルト値）
・linear：同じ速度で推移
・ease-in：始めがゆっくり、だんだん速く
・ease-out：始めが速く、だんだんゆっくり
・ease-in-out：始めと終わりがゆっくり
・cubic-bezier：自分でスピードを設定することができます
/* hoverしてから1秒後に、background-colorを0.5秒かけてease-in-outでアニメーションさせる */
a:hover {
transition-property: background-color;
transition-duration: .5s;
transition-delay: 1s;
transition-timing-function: ease-in-out;
}
それぞれの特徴の比較には、下のようなグラフがよく使われます。
慣れないと読みづらいですが、縦軸が目的地までの距離、横軸が時間を表しています。
linear：同じ速度で推移
順番が前後しますが、一番わかりやすいのがlinearです。
linearはいわゆる等速直線運動です。昔、物理で習いましたね。
アニメーションの開始から終了まで同じ速度で推移するので、グラフの形状は直線になります。
ease：始めと終わりがゆっくり
始めと終わりがゆっくりになるのがeaseです。
CSSでは、これがデフォルト値になります。
ease-in：始めがゆっくり、だんだん速く
始めがゆっくりになるのがease-inです。
ease-out：始めが速く、だんだんゆっくり
終わりゆっくりになるのがease-inです。
ease-in-out：始めと終わりがゆっくり
始めと終わりがゆっくりになるのがease-in-outです。
easeよりカーブのしなりが急になるので、よりメリハリがつきます。
cubic-bezier：自由に設定
cubic-bezierを使うと、こうしたスピード（グラフのカーブ）を自分で設定することができます。
bezierは、Illustratorのベジェ曲線(Bézier curve)でおなじみの「ベジェ」です。
transitionの開始と終了、それぞれの方向点の位置を指定することで、好きなカーブの形状にすることができます。
a:hover {
/* cubic-bezier(開始のX位置, 開始のY位置, 終了のX位置, 終了のY位置) */
transition-timing-function: cubic-bezier(0, .5, 1, 0);
}
サンプル
一通り読み解けたところで、改めてtransitonを使って全実装してみます。
a{
text-decoration: none;
font-size: 25px;
padding: 15px 20px;
border-radius: 5px;
color: #FFF;
background-color: #3e6296;
}
a:hover {
transition: background-color .5s 1s ease-in-out;
/* 以下と同義
transition-property: background-color;
transition-duration: .5s;
transition-delay: 1s;
transition-timing-function: ease-in-out;
*/
}
まとめ
自然の動きには、あまり等速の運動は存在しません。
物を落とせば、そのスピードは重力によって加速されます。
物を投げれば、空気抵抗によって減速します。
こうしたナチュラルな動きを意識すると、相手の目に自然に映るアニメーションを実装することができます。
