1 reply [Last post]
motogeeeksatyam
motogeeeksatyam's picture
Offline
newbie
India
Last seen: 8 years 21 weeks ago
India
Timezone: GMT+5.5
Joined: 2012-12-19
Posts: 1
Points: 2

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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Link?

Can you provide a link since we don''t have your images?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.