CSS Animation

CSS

Webkitブラウザに続いてFirefoxがCSSアニメーションに対応したらしい。

以下のように書くとページロード時にアニメーションが発動する。試しに→に仕込んでみた。

.hatena-moduletitle {
  -webkit-animation: fadeSlideIn 500ms ease-in 0s 1 normal;
  -moz-animation: fadeSlideIn 500ms ease-in 0s 1 normal;
}
@-webkit-keyframes fadeSlideIn {
  from { -webkit-transform: translateX(-24px); opacity: 0; }
  to { -webkit-transform: translateX(0); opacity: 1; }
}
@-moz-keyframes fadeSlideIn {
  from { -moz-transform: translateX(-24px); opacity: 0; }
  to { -moz-transform: translateX(0); opacity: 1; }
}

animationのプロパティの値は左からname, duration, timing-function, delay, iteration-count, direction。

nameに指定するアニメーション動作(キーフレーム)の設定は、webkitとFirefoxで共有できないようだ。同じ事を二回書かないといけない。ただ、いつものようにFirefoxとWebkitで実装に違いがあるので、別れている方が助かるかもしれない。