How to make CSS animation not reverse after finishing? Example inside - html

I currently have a picture that is rotating and scaling using keyframes, but my problem is that after every iteration it reverses rotation direction. How do I stop this from happening so that the rotating is smooth in one direction? JSFiddle. See full webpage HTML here:
<html class="fourzerofour">
<head>
<!-- Hey, look at you, you know how to view the source code, well done! Here's a unicode cookie: 🍪-->
<meta charset="UTF-8">
<title>Egrodo | 404</title>
<link rel="stylesheet" type="text/css" href="../CSS/error404.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="../CSS/materialize.css" />
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link rel='shortcut icon' href='../favicon.ico' type='image/x-icon'/ >
</head>
<body class="fourzerofour">
<section class="fourzerofour">
<p class="fourzerofour">
404 - What have you done?!?
</p>
<img draggable="false" class="rotating fourzerofour" src="https://i.imgur.com/n5SVALx.png">
</section>
</body>
</html>
and my full page CSS here:
body {
font-family: 'Raleway', sans-serif;
}
p.fourzerofour {
font-size: 2.4em;
color: white;
display: block;
margin-top: -2em;
margin-bottom: 2em;
}
body.fourzerofour {
height: 100%;
background-color: darkgrey;
}
section.fourzerofour {
position: relative;
height: 100%;
text-align: center;
margin-top: 23%;
}
.rotating {
-webkit-animation: rotating 3s linear infinite;
-moz-animation: rotating 3s linear infinite;
-ms-animation: rotating 3s linear infinite;
-o-animation: rotating 3s linear infinite;
animation: rotating 3s linear infinite;
animation-direction: alternate;
width: 10em;
}
p.fourzerofour + .rotating:active {
-webkit-filter: invert(1);
}
#-webkit-keyframes rotating /* Safari and Chrome */ {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
50% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1):
}
100% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
}
#keyframes rotating {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
50% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) sscale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
100% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
}


Get rid of the infinite line and remove the 50% keyframe styles as well as this is the middle of the animation. Instead give the 100% the final animation styles you would like: JS Fiddle
Appending infinite on the animation will have it continually loop.
.rotating {
-webkit-animation: rotating 3s linear;
-moz-animation: rotating 3s linear;
-ms-animation: rotating 3s linear;
-o-animation: rotating 3s linear;
animation: rotating 3s linear;
animation-direction: alternate;
width: 10em;
}
p.fourzerofour + .rotating:active {
-webkit-filter: invert(1);
}
#-webkit-keyframes rotating /* Safari and Chrome */ {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
100% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1):
}
}
#keyframes rotating {
0% {
-ms-transform: rotate(0deg) scale(.1);
-moz-transform: rotate(0deg) scale(.1);
-webkit-transform: rotate(0deg) scale(.1);
-o-transform: rotate(0deg) scale(.1);
transform: rotate(0deg) scale(.1);
}
100% {
-ms-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) sscale(1);
-o-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
And if I misunderstood the desired effect and you want it to continually loop in one direction, see #maioman answer


if you remove animation-direction:alternate it should be fine;
fiddle
moreover I adjusted rotation in fiddle


It has animation: rotating 3s linear infinite, where infinite is the transition-duration and here rotating is the transition i.e. why it keeps repeating its animation, removing that will do the trick for you.
Here the JSFiddle.

Related

Bounce keyframe animation on hover out stops abruptly

As you can see in the below animation, if you hover out then the animation stops abruptly. I would like to transition it to the final position down. Is there a way to do it while keeping keyframes?
.bounce{
width:100px;
height:100px;
background:red;
margin-top:100px;
}
.bounce:hover {
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
#keyframes bounce {
0%, 100%, 20%, 50%, 80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px)
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px)
}
}
<div class="bounce"></div>

What css property can i use to make my bounce animation much more smoother ?

I have a simple bounce in animation for my figure , see HTML below:
<figure>
<img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="">
<figcaption>
<!-- empty for now -->
</figcaption>
</figure>
My CSS animation is as follows:
#keyframes drop-in-thumb {
0% {
-webkit-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0.8;
}
35% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
55% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px);
}
70% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
85% {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
The fiddle can be seen HERE.
The problem is my animation is quite jerky , I.E. it does't have a realistic bounce in effect , it looks clearly quite jerky. My question is what other property in the keyframes apart form the % breakpoints can i use to tweak and make my animation smooth ?
Tweaking the % breakpoints really helped me make the animation much more smoother and but its really not yet realistic yet. What other CSS animation property can i use to make this animation smoother ?
It would be great if somebody could demonstrate how i could perfect and make this animation much more smoother.
P.S. i am aware of the library animate.css but don't want to use it.

The animation-timing-function property should improve this considerably.
Try adding the following to the styles for figure:
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
I've edited your fiddle to show the difference: https://jsfiddle.net/ssexmh3s/2/

CSS3 transform not working on Firefox, why?

Hi here's my code in JSFiddle
http://jsfiddle.net/qnbxaLwh/
Here's the simple HTML
<span class="arrow">xssss</span>
Here's my CSS
.arrow {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right:10px;
bottom: 5%;
left: 0;
right: 0;
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
-o-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
I've been trying for hours but I don't understand why it's not working on firefox. I tried rearranging and googling some stuffs but nothing works.

change position:relative; to position:absolute;
working fiddle -> http://jsfiddle.net/qnbxaLwh/1/
you can remove keyframe for firefox, firefox no longer uses for 2 years ago.

If you need to use position relative, try using some tools like this -> https://coveloping.com/tools/css-animation-generator
According to the code that they use (working crossbrowser) you're using wrong prefix for you animations (-moz-animation-name, for example...)

Please update css
.arrow {
position: absolute;
margin-left: auto;
margin-right: auto;
padding-right:10px;
bottom: 5%;
left: 0;
right: 0;
top: 0;
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
-o-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
60% {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
}

css animation doesn't work in firefox

My code doesnt work in Firefox and I dont know why. Any advices? It works fine in Chrome, IE and Opera. I tried almost all prefixes combinations but still it wont work. Is it possible that something is wrong with my PC or Firefox browser?
.span-accent {
color: rgb(60, 185, 120);
-webkit-animation: breath 2s infinite;
-moz-animation: breath 2s infinite;
animation: breath 2s infinite;
}
#-webkit-keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes breath {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
25% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-moz-transform: scale(1);
transform: scale(1);
}
75% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#keyframes breath {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
<h1>LAKA</h1>
<h2>architecture that <span class="span-accent">reacts.</span></h2>

Ok guys, I found it.
Problem is in <span> element. For some reason Firefox doesnt animate inline elements.
So what I did is change a <span> atribute to display: inline-block.
It just wont work strictly for any inline element.

CSS Animations not fully displaying in safari

So I'm new to using CSS animations and thought I'd play around to learn it. I can get everything displayed and working fine in Chrome but I'm having difficulty getting it to display properly if FF and Safari. (In FF the foreground animation doesn't work and in Safari only the rotate works.)
My HTML is basic:
<html>
<head>
<title>Happy Birthday!</title>
<link rel="stylesheet" href="styles.css" media="all" />
</head>
<body>
<div class="wrapper">
<div class="carebear"></div>
</div>
<div class="foreground"></div>
<div class="midground"></div>
<div class="background"></div>
</body>
</html>
And my CSS:
html {
background: url('bg.jpg') 0 100% repeat-x;
width:100%;
height: 100%;
}
.carebear {
background: url('care3.png')0 0 no-repeat;
width: 295px;
height: 274px;
-webkit-animation: float 1.8s linear infinite both;
-moz-animation: float 1.8s linear infinite both;
-o-animation: float 1.8s linear infinite both;
animation: float 1.8s linear infinite both;
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
}
#-webkit-keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
#-moz-keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
#-o-keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
#keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
.wrapper {
-webkit-animation: move 10s ease-in-out infinite both;
-moz-animation: move 10s ease-in-out infinite both;
-o-animation: move 10s ease-in-out infinite both;
animation: move 10s ease-in-out infinite both;
position: absolute;
top: 15%;
left: 25%;
z-index: 3;
}
#-webkit-keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
#-moz-keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
#-o-keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
#keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
.foreground, .midground, .background {
width: 100%;
height: 100%;
position: absolute;
bottom: 0; left: 0;
}
.foreground {
-webkit-animation: parallax_fg linear 10s infinite both;
-moz-animation: parallax_fg linear 10s infinite both;
-o-animation: parallax_fg linear 10s infinite both;
animation: parallax_fg linear 10s infinite both;
background: url('cloud-front.png') 0 100% repeat-x;
z-index: 4;
}
#-webkit-keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
#-moz-keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
#-o-keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
#keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
.midground {
-webkit-animation: parallax_mg linear 20s infinite;
-moz-animation: parallax_mg linear 20s infinite;
-o-animation: parallax_mg linear 20s infinite;
animation: parallax_mg linear 20s infinite;
background: url('cloud-middle2.png') 0 100% repeat-x;
z-index: 2;
}
#-webkit-keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
#-moz-keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
#-o-keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
#keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
.background {
background-image:
url('bg.jpg');
background-repeat: repeat-x;
background-position: 0 100%;
z-index: 1;
-webkit-animation: parallax_bg linear 40s infinite;
-moz-animation: parallax_bg linear 40s infinite;
-o-animation: parallax_bg linear 40s infinite;
animation: parallax_bg linear 40s infinite;
}
#-webkit-keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
#-moz-keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
#-o-keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
#keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
Thanks for your help!