デフォルト
- font-familyの指定はウェイトなしのアルファベット表記のみでほぼよさそう | Culture27
http://www.culture27.com/blog/2011/12/font-family
これまで。
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif;
いまどき(2011-12)。
font-family: 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
ルールとか
- IE6-9では、「4095ルールまで」「@importは31シートまで」「@importのネストは4レベルまで」の制限あり(Stylesheet limits in IEより)。
透明
opacityは子要素まで透明に。
.elem {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */
filter: alpha(opacity=40); /* IE */
-moz-opacity:0.4; /* Firefox(old) */
-khtml-opacity: 0.4; /* Safari(old) */
opacity: 0.4;
}
rgbaだと、その要素だけ透明に。
.elem {
background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
}
CSS アニメーション
@keyframes test {
from { left: 0; }
to { left: 100px; }
}
@keyframes test2 {
from { left: 0; }
20% { left: 100px; }
to { left: 200px; }
}
animation-name
div {
animation-name: test;
}
animation-duration
デフォルト: 0s
.test1{
animation-duration: 1s;
}
animation-timing-function
デフォルト: ease
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) |
| linear | cubic-bezier(0, 0, 1, 1) |
| ease-in | cubic-bezier(0.42, 0, 1, 1) |
| ease-out | cubic-bezier(0, 0, 0.58, 1) |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
| step-start | steps(1, start) |
| step-end | steps(1, end) |
steps()
- 指定した回数で等間隔に分割して実行
- steps(1, start), steps(1, end), steps(3, start), steps(3, end)などを試す。
cubic-bezier()
- Ceaser - CSS Easing Animation Tool - Matthew Lein
http://matthewlein.com/ceaser/ - cubic-bezier(.17,.67,.83,.67) ✿ cubic-bezier.com
http://cubic-bezier.com/#.17,.67,.83,.67
animation-iteration-count
アニメーションの実行回数
デフォルト: 1
infinite: 無限に繰り返し
animation-direction
アニメーションの方向
デフォルト: normal
alternate: 奇数回はノーマル、偶数回は逆方向
animation-play-state
アニメーションの実行状態
デフォルト: running
paused: 一時停止
animation-delay
デフォルト: 0s
animation-fill-mode
アニメーションの前後のスタイル
デフォルト: none
| none | |
| forwards | アニメーション実行後に、to/100%の指定が適用される(ただしanimation-direction: alternate;でanimation-iteration-countが偶数の場合は、from/0%が適用)。 |
| backwards | アニメーションが適用されたら即座にキーフレームの最初のスタイルを適用(animation-delayの間も維持)。 |
| both | forwards & backwards |
animation
div {
animation: name duration timing-function delay iteration-count direction fill-mode;
}
div {
animation: test 3s linear 1s 2 normal forwards;
}
イベント
| webkit | IE10 | ||
|---|---|---|---|
| animationstart | 開始(遅延時間後) | webkitAnimationStart | MSAnimationStart |
| animationend | 終了 | webkitAnimationEnd | MSAnimationEnd |
| animationiteration | animation-iteration-count > 1の場合に発生(アニメーションが1周するごとに) | webkitAnimationIteration | MSAnimationIteration |