CSS3 animating border-radius on Firefox not working -
I am currently trying to create an animated extension area (circle) that is CS3 only
I managed to work on animation on webkit browsers which kept the circular / circle shape of an animated element, but I do not know why this does not work on Firefox, some boundaries apply to it ( About 20px) but does not work as it works on WebKit.
Here is the code that I use.
@ - WebKit-keyframe extension area {0% {padding: 10px; Opacity: 0;} 25% {height: 150px; Boundary-radius: 150px; Width: 150px; Left: 520px; Top: 200px;} 55% {Height: 350px; Limit-Radius: 500px; Width: 350px; Left: 420px; Top: 100px;} 75% {Height: 547px; Range radius: 700px; Width: 700px; Top: 0; Left: 250px;} 100% {height: 547px; Opacity: 1; Top: 0px; Left: 0; Width: 1180px; Boundary-radius: 0;}} @ -mose-keyframe extension page {0% {padding: 10px; Height: 20px; Width: 20px; Opacity: 0; -image-radius: 50px;} 25% {height: 150px; Width: 150px; Left: 520px; Top: 200px; -image-radius: 150px;} 55% {height: 350px; Width: 350px; Left: 420px; Top: 100px; -image-radius: 500px;} 75% {height: 547px; Width: 700px; Top: 0; Left: 250px; -image-radius: 700px;} 100% {height: 547px; Opacity: 1; Top: 0px; Left: 0; Width: 1180px; -image-radius: 0;}}
You stop using the seller Prefixes are not required.
Specifically, see
Comments
Post a Comment