Wed, 2012-12-19 18:02
Using CSS animations i created an animation it works perfectly in google chrome but not in mozilla any fix that i can do.
Actually in each keyframe i am trying to change background image but it somehow doesn't change i included "-moz" for mozilla.
here is the code:
<html> <head> <title>Slider</title> <style> div { position:relative; width: 30%; height: 250px; border-radius: 10px; border: 5px solid red; background: url("img.jpg"); -webkit-animation: myframes 15s infinite; -moz-animation: myframes 15s infinite; } @-webkit-keyframes myframes { 0%{background: url("img.jpg");border: 5px solid red;-webkit-transform:rotate(0deg);left:0px;} 25%{background: url("img1.jpg");border: 5px solid blue;-webkit-transform:rotate(20deg);left:0px;} 50%{background: url("img2.jpg");border: 5px solid green;-webkit-transform:rotate(0deg);left:500px;} 75%{background: url("img3.jpg");border: 5px solid magenta;-webkit-transform:rotate(0deg);left:500px;} 100%{background: url("img4.jpg");border: 5px solid yellow;-webkit-transform:rotate(-360deg);left:0px;} } @-moz-keyframes myframes { 0%{background: url("img.jpg");border: 5px solid red;-webkit-transform:rotate(0deg);left:0px;} 25%{background: url("img1.jpg");border: 5px solid blue;-webkit-transform:rotate(20deg);left:0px;} 50%{background: url("img2.jpg");border: 5px solid green;-webkit-transform:rotate(0deg);left:500px;} 75%{background: url("img3.jpg");border: 5px solid magenta;-webkit-transform:rotate(0deg);left:500px;} 100%{background: url("img4.jpg");border: 5px solid yellow;-webkit-transform:rotate(-360deg);left:0px;} } </style> </head> <body> <div> </div> </body> </html>
Wed, 2012-12-19 19:44
#1
Link?
Can you provide a link since we don''t have your images?
cheers,
gary