なんとなく使ってるcssのtransitionって何?いつどんな時に使えるの?

CSS HTML
Update 2018.03.08

cssのtransitionプロパティってどんな設定をするとどんな動きになるのか、意外とわかっていない人も多いのでは?

そもそもtransition効果とは「時間的変化」のことで、例えばボタンなどでマウスホバーした時にフワーッと徐々に変化するものありますよね。
そのフワーの動きをtransitionプロパティで細かく設定できますよっていうはなしです。

browser:  65 11 20 10 

transitionの設定

transitionは[:hover]などのきっかけとセットで使う。
animationは@keyframesで細かい設定が可能

例えば下記の場合、
[background:#29b6f6;][width:100px;]のboxを[:hover]キッカケで
[background:#f06292;][width:200px;]に変更します。

transitionで指定するプロパティ

transitionで指定するプロパティは以下になります。

transition-property:トランジションを適用するプロパティ
transition-duration:トランジションにかける時間
transition-timing-function:トランジション実行中の変更速度
transition-delay:トランジション実行やプロパティ変更の際の待ち時間


transition-property:トランジションを適用するプロパティを指定


background
background-colorbackground-position
border-bottom-colorborder-bottom-width
border
border-left-colorborder-left-width
border-right-colorborder-right-width
border-spacingborder-top-color
border-top-widthoutline-color
outline-width 
position
topbottom
rightleft
font/text
font-sizefont-weight
word-spacingletter-spacing
line-heightcolor
text-shadowtext-indent
margin/padding/size
margin-topmargin-bottom
margin-rightmargin-left
widthheight
min-heightmax-height
max-widthmin-width
padding-toppadding-bottom
padding-rightpadding-left
other
visibilityopacity
clipvertical-align
z-index 


transition-duration:トランジションにかける時間

・初期値は[0s]


transition-timing-function:トランジション実行中の変更速度を指定

*[:hover]で確認できます。
基本的な動きは、[background:#29b6f6;][width:100px;]のboxを[:hover]キッカケで1秒かけて[background:#f06292;][width:200px;]に変更します。
transition-timing-functionプロパティの値
ease:cubic-bezier(0.25, 0.1, 0.25, 1.0) と同様(開始と完了を滑らかにする)(初期値)
ease
transition: background 1s ease,width 1s ease;
linear:cubic-bezier(0.0, 0.0, 1.0, 1.0) と同様(一定)
linear
transition: background 1s linear,width 1s linear;
ease-in:cubic-bezier(0.42, 0, 1.0, 1.0) と同様(ゆっくり始まる)
ease-in
transition: background 1s ease-in,width 1s ease-in;
ease-out:cubic-bezier(0, 0, 0.58, 1.0) と同様(ゆっくり終わる)
ease-out
transition: background 1s ease-out,width 1s ease-out;
ease-in-out:cubic-bezier(0.42, 0, 0.58, 1.0) と同様(ゆっくり始まってゆっくり終わる)
ease-in-out
transition: background 1s ease-in-out,width 1s ease-in-out;
step-start:通常のhoverの動きおよびsteps(1, start)と同様(瞬時に始まって終わる)
step-start
transition: background 1s step-start,width 1s step-start;
step-end:steps(1, end)と同様(transition-durationの時間だけ待って実行)
step-end
transition: background 1s step-end,width 1s step-end;
steps(数値, start or end):ステップ数(数値)で等分に区切り実行。ステップ数は正の整数で指定
steps
transition: background 3s steps(3,end),width 3s steps(3,end);
サンプルはtransition-duration:3s steps(3,end)で設定(3秒間で3ステップで変化)
transition-duration:3sで設定した時のステップタイミング
steps(3,start)の場合:0s,1s,2sのタイミングで変化
steps(3,start)の場合:1s,2s,3sのタイミングで変化
cubic-bezier(数値, 数値, 数値, 数値):3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
cubic-bezier
transition: background 1s cubic-bezier(.17,.89,.32,1.28),width 1s cubic-bezier(.17,.89,.32,1.28);
cubic-bezierの指定はhttp://cubic-bezier.com/での編集が簡単です


transition-delay:トランジション実行やプロパティ変更の際の待ち時間を指定

指定した秒数だけ、イベントの発生を遅らせます。
transition-delay:1sであれば1秒間は実行されない。


transition(ショートハンド):上記4プロパティのショートハンド

transition:transition-property transition-duration transition-timing-function transition-delay;

ex)background-colorを0.3sかけて[ease]で動かす。ただし1sは実行しない。
transition:background-color 0.3s ease 1s;

ex)backgroundを0.3sかけて[ease]で動かし、heightも0.3sかけて[ease]で動かす。
transition:background 0.3s ease,height 0.3s ease;

cssのtransitionを使ったパーツはこちら

copypet.jp

コピペでできる!cssとhtmlのみで画像のホバー時のいい感じのエフェクト10選 | copypet.jp|パーツで探す、web制作に使えるコピペサイト。

cssとhtmlのみで画像のホバー時のいい感じのエフェクトを集めました。 画像の雰囲気に合わせてエフェクトを組み合わせると、よりいい感じになります。…

copypet.jp

記事を見る

copypet.jp

コピペでできる!cssとhtmlのみで画像のホバー時にシュッとしたいい感じのキャプションを出すエフェクト11選 | copypet.jp|パーツで探す、web制作に使えるコピペサイト。

cssとhtmlのみで画像のホバー時にシュッとしたいい感じのキャプションを出すエフェクトを集めました。 ベンダープレフィックスについては適宜外してください。 また、アニメーションは「transition-timing-function」を設定することで、時間ごとの変化量を変更することができます。…

copypet.jp

記事を見る

copypet.jp

コピペでできる!CSSとhtmlだけのホバーエフェクトが楽しい矢印アクション5種 | copypet.jp|パーツで探す、web制作に使えるコピペサイト。

ランディングページやキャンペーンサイトなどでは全画面イメージからスクロールさせるような場合が多くあります。 下にスクロールさせたいけど矢印に気づいてもらえないなんてことになってはもともこもありませんね。 そこで使えるのが、スクロールを促すための矢印アクションです。 目立ちすぎず、でも気がつきやすいホバーエフェクトを備えた矢印をご用意しました。…

copypet.jp

記事を見る

ホバーエフェクトでcssのtransitionを使いやすいボタン一覧

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?