css3 animation not working in firefox

aaronhockey_09 · 09-15-2012, 03:55 AM

hey guys,
i have a css3 animation working in chrome, but wont work in firefox

heres the css

Code:

@-webkit-keyframes movingbox{
			0%{left:0%;}
			50%{left:100%;}
			100%{left:0%;}
		}

.ball {
			width: 8px;
			height: 8px;
			position: absolute;
			background: white;
			border-radius: 50px;
			box-shadow: 0 0 20px white;
			left:0%;
			top: 75px;
			-webkit-animation: movingbox 10s infinite;
			-moz-animation: movingbox 10s infinite;
			-o-animation: movingbox 10s infinite;
			animation: movingbox 10s infinite;

			-webkit-animation-timing-function:linear;
			-moz-animation-timing-function:linear;
			-o-animation-timing-function:linear;
			animation-timing-function:linear;
			z-index: 0;
}

see it here http://aaron-armstrong.com/tophat/index.html

Sammy12 · 09-15-2012, 04:08 AM

You are missing the other browser prefixes.

Code:

@-webkit-keyframes movingbox{
    /* you have this one in your code above */
}
@-moz-keyframes movingbox{

}
@-o-keyframes movingbox{

}
@keyframes movingbox{

}

http://coding.smashingmagazine.com/2...me-animations/

aaronhockey_09 · 09-15-2012, 04:12 AM

Quote:

Originally Posted by Sammy12

You are missing the other browser prefixes.

Code:

@-webkit-keyframes movingbox{
    /* you have this one in your code above */
}
@-moz-keyframes movingbox{

}
@-o-keyframes movingbox{

}
@keyframes movingbox{

}

http://coding.smashingmagazine.com/2...me-animations/

of course, how could i forget
thanks