transitionで指定するプロパティ

 
browser: 

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;

copypet.jp

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

More Info

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