SaCSS vol.32 CSS3＆CSSアニメーション再！＋スマホサイトコーディングTips

SaCSS vol.32

CSS3＆CSSアニメーション再！＋スマホサイトコーディングTips
h2hamさん

box-shadow

• 本体をpoisition:relativeにする
• before, afterで影を作る
• z-indexを使用して、擬似要素の上にbox要素が来るようにする

transition-*

• transition-durationで変更にかかる時間を指定できる
• transition-delayで変更開始時間を指定
• transition-timing-functionでアニメーションの挙動を変更できる
  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out

@-webkit-keyframes

• 動作時間の割合毎に変化して欲しいプロパティを指定する

  /* 移動させるアニメーション */
  @-webkit-keyframes move {
      0% {left: 0; top: 0;}
      50% {left: 200px; top: 200px;}
      100% {left: 500px; top: 500px;}
  }
  

• -webkit-animation-* で作成したkeyframeの実行回数、時間等を指定する

UI/ボタン

• display:inline-blockが良さげ
  • blockだと横に伸びる
  • inlineだとmargin等が効かない
• グラデーションを入れてそれっぽく
  • Ultimate CSS Gradient Generatorで簡単にグラデーションのCSSを作れる
• 使うタグは用途によって使い分ける

UI/タブ

• labelで作りcheckboxと連動させて、アクティブな状態を保持できる
  • input自体はdisplay:noneで隠しておく
  • 擬似要素の:checkedとnth-of-typeでボタンのCSSを変更する
• inputタグはlabelの前に置く
  • 前の要素をCSSで指定するのは面倒
  • nth-of-typeを使うためにlabelタグの前に置く模様

UI/アコーディオン

• checkboxをradioに変更
• inputとlabelの並び順も書きやすい用に変更しておく
• 閉じてる状態では高さは0, 開いてる状態ではautoを指定している
• autoではアニメーションさせられないので、高さをちゃんと指定する必要がある

その他

• 要素によってはアニメーションできないこともある
  • グラデーション、角丸とか
  • ブラウザ依存なので確認が必要
• jQuery Mobileの紹介