| background | |
|---|---|
| background-color | background-position |
| border-bottom-color | border-bottom-width |
| border | |
| border-left-color | border-left-width |
| border-right-color | border-right-width |
| border-spacing | border-top-color |
| border-top-width | outline-color |
| outline-width | |
| position | |
| top | bottom |
| right | left |
| font/text | |
| font-size | font-weight |
| word-spacing | letter-spacing |
| line-height | color |
| text-shadow | text-indent |
| margin/padding/size | |
| margin-top | margin-bottom |
| margin-right | margin-left |
| width | height |
| min-height | max-height |
| max-width | min-width |
| padding-top | padding-bottom |
| padding-right | padding-left |
| other | |
| visibility | opacity |
| clip | vertical-align |
| z-index | |
| 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/での編集が簡単です |
CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info