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で実装に違いがあるので、別れている方が助かるかもしれない。