イヨノート

Design, Code and other chaos included.

Firefox (v12) とChome (v18) のcss3 animationの記述の違い

2012.05.15

animation

12/05/15現在、Firefox (v12) ではanimation-nameとkeyframesの指定に、クォーテーションを使用すると動かない。

現状動作する記述は以下。

e:hover {
	-webkit-animation: 'actHover' ease-out 1s 1; /* クォーテーションなしでも動作 */
	-moz-animation: actHover ease-out 1s 1;
	animation: 'actHover' ease-out 1s 1;
}

@-webkit-keyframes 'actHover' { from { opacity: 0.5; } to { opacity: 1; } } /* クォーテーションなしでも動作 */
@-moz-keyframes actHover { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes 'actHover' { from { opacity: 0.5; } to { opacity: 1; } }

transition

こちらも備忘録。

12/05/15現在、Firefox (v12) ではtransition-delayの指定に、秒数の後にs (単位) を付与しないと動かない。

現状動作する記述は以下。

e:hover {
	-webkit-transition: background-color 1s linear 0s; /* 単位なしの0でも動作 */
	-moz-transition: background-color 1s linear 0s; /* transition-delayを省略しても動作 */
	transition: background-color 1s linear 0s;
}