2011/11/01

アニメーションできるプロパティがわかる一覧表、「animatable」

animatable」は、CSS3の transition を適用できるプロパティを一覧を掲載しています。ウェブサイト作成時に、無意味なCSSプロパティを指定をすることはブラウザのレンダリングパフォーマンスを落とします。このツールを使えば余計なプロパティにアニメーションを指定しなくて済みます。






掲載されているプロパティ一覧
ここにあるプロパティはtransitionを指定できます。

  • background-color
  • background-position
  • background-size
  • border-radius
  • border-width
  • box-shadow
  • color
  • font-size
  • width
  • height
  • letter-spacing
  • line-height
  • opacity
  • outline
  • text-indent
  • text-shadow
  • top
  • transform
  • transform-origin

無意味な指定とは

span{
width : 100px;
height : 100px }

上記の指定は無駄な指定です。span はインライン要素ですので幅と高さの指定は無意味なのです。このような指定はブラウザのレンダリングパフォーマンスを損ないます。