shake and rotate div with css3 - html

I want to make a div a little fuzzy adding this css class
.fuzz{
margin-left: 0px;
animation:fuzz 0.1s linear 0s infinite ;
-moz-animation: fuzz 0.1s linear 0s infinite ; /* Firefox */
-webkit-animation: fuzz 0.1s linear 0s infinite ; /* Safari and Chrome */
-o-animation: fuzz 0.1s linear 0s infinite ; /* Opera */
}
#keyframes fuzz
{
0% {margin-left: 0px; transform: rotate(5deg);}
25% {margin-left: -5px; transform: rotate(-5deg);}
50% {margin-left: 0px; transform: rotate(0deg);}
75% {margin-left: 5px; transform: rotate(5deg);}
100% {margin-left: 0px; transform: rotate(0deg);}
}
#-moz-keyframes fuzz /* Firefox */
{
0% {margin-left: 0px; transform: rotate(5deg);}
25% {margin-left: -5px; transform: rotate(-5deg);}
50% {margin-left: 0px; transform: rotate(0deg);}
75% {margin-left: 5px; transform: rotate(5deg);}
100% {margin-left: 0px; transform: rotate(0deg);}
}
#-webkit-keyframes fuzz /* Safari and Chrome */
{
0% {margin-left: 0px; transform: rotate(5deg);}
25% {margin-left: -5px; transform: rotate(-5deg);}
50% {margin-left: 0px; transform: rotate(0deg);}
75% {margin-left: 5px; transform: rotate(5deg);}
100% {margin-left: 0px; transform: rotate(0deg);}
}
#-o-keyframes fuzz /* Opera */
{
0% {margin-left: 0px; transform: rotate(5deg);}
25% {margin-left: -5px; transform: rotate(-5deg);}
50% {margin-left: 0px; transform: rotate(0deg);}
75% {margin-left: 5px; transform: rotate(5deg);}
100% {margin-left: 0px; transform: rotate(0deg);}
}
but it only shake left and right...
Why transform: rotate(5deg) doesn't work?
How can i do?


best practice and performance
Demo: http://jsfiddle.net/4X6Dt/3/
.fuzz{
animation:fuzz 0.1s linear 0s infinite ;
-moz-animation: fuzz 0.1s linear 0s infinite ; /* Firefox */
-webkit-animation: fuzz 0.1s linear 0s infinite ; /* Safari and Chrome */
-o-animation: fuzz 0.1s linear 0s infinite ; /* Opera */
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
#keyframes fuzz
{
0% {transform: rotate(5deg) translate3d( 0px,0,0);}
25% {transform: rotate(-5deg) translate3d( -5px,0,0);}
50% {transform: rotate(0deg) translate3d( 0px,0,0);}
75% {transform: rotate(5deg) translate3d( 5px,0,0);}
100% {transform: rotate(0deg) translate3d( 0px,0,0);}
}
#-moz-keyframes fuzz /* Firefox */
{
0% {-moz-transform: rotate(5deg) translate3d( 0px,0,0);}
25% {-moz-transform: rotate(-5deg) translate3d( -5px,0,0);}
50% {-moz-transform: rotate(0deg) translate3d( 0px,0,0);}
75% {-moz-transform: rotate(5deg) translate3d( 5px,0,0);}
100% {-moz-transform: rotate(0deg) translate3d( 0px,0,0);}
}
#-webkit-keyframes fuzz /* Safari and Chrome */
{
0% {-webkit-transform: rotate(5deg) translate3d( 0px,0,0);}
25% {-webkit-transform: rotate(-5deg) translate3d( -5px,0,0);}
50% {-webkit-transform: rotate(0deg) translate3d( 0px,0,0);}
75% {-webkit-transform: rotate(5deg) translate3d( 5px,0,0);}
100% {-webkit-transform: rotate(0deg) translate3d( 0px,0,0);}
}
#-o-keyframes fuzz /* Opera */
{
0% {-o-transform: rotate(5deg) translate3d( 0px,0,0);}
25% {-o-transform: rotate(-5deg) translate3d( -5px,0,0);}
50% {-o-transform: rotate(0deg) translate3d( 0px,0,0);}
75% {-o-transform: rotate(5deg) translate3d( 5px,0,0);}
100% {-o-transform: rotate(0deg) translate3d( 0px,0,0);}
}

Related

Keyframe animations

I am a bit confused on how keyframes work exactly in this demo. Whats confusing me is that 0% and 100% are not defined but 25% and 75% are. But at 0% the 25% keyframe is active. I thought it wouldn't be active until 25% through the animation until it hits the 75% keyframe. Also when does the 75% keyframe stop 100%? If you could explain exactly what is happening it would be appreciated. I hope this question is clear. Thanks.
#-webkit-keyframes pulse {
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes pulse {
25% {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
.pulse {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
width: 50px;
height: 50px;
background-color: blue;
}
.pulse:hover {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
<div class="pulse">
</div>

hi if you don't need animation to happen then add
#keyframes <animation name>
{
0%,25%
{
animation here
}
75%,100%
{
animation here
}
}
what happens here is animation don't start up-to 25%, from 25% to 75% animation plays and stops after 75% until it reaches 100%

CSS Translate Issue on Safari

I am working on converting a Gif I made to a CSS animation. Everything works on Chrome, Firefox, Opera, but when it comes to Safari it acts up.
When I initially load the page the images ignore translate and sit below, but once I click out of the Safari tab and back in, the page is updated and the images have the appropriate coordinates given by Translate.
Does anyone know why this would be happening?
HTML:
<section>
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Globe.png" class="globe center" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Red.png" class="center redSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Orange.png" class="center orangeSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Yellow.png" class="center yellowSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Green.png" class="center greenSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Blue.png" class="center blueSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Indigo.png" class="center indigoSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Violet.png" class="center violetSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Continents.png" class="center continent" width="170%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/GlobeMask.png" class="center knockOut" width="190%">
</section>
CSS:
*{
margin: 0px;
padding: 0px;
}
body{
background-color:#333;
overflow: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display:block;
}
.continent{
left: 72%;
animation:slide 9s infinite;
animation-timing-function: linear;
z-index: 3;
transform: translate(-50%,-50%);
}
.globe{
z-index: 2;
transform: translate(-50%, -50%);
}
.knockOut{
z-index: 4;
transform: translate(-50%,-50%);
}
/*All working above!*/
/*ANIMATION*/
/*Content Slide Animation*/
.slide{
animation: ;
}
#-webkit-keyframes slide {
from{left: 71%;}
to{left: 28.5%;}
}
#-moz-keyframes slide {
from{left: 71%;}
to{left: 28.5%;}
}
#keyframes slide {
from{left: 71%;}
to{left: 28.5%;}
}
/*Red Arc Animation*/
.redSpin {
-webkit-animation:spinRed 10s linear infinite;
-moz-animation:spinRed 10s linear infinite;
-o-animation:spinRed 10s linear infinite;
animation:spinRed 10s linear infinite;
}
#-o-keyframes spinRed {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
60% { -o-transform: translate(-50%,-50%) rotate(540deg); }
100% { -o-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-moz-keyframes spinRed {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
60% { -moz-transform: translate(-50%,-50%) rotate(540deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-webkit-keyframes spinRed {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
60% { -webkit-transform: translate(-50%,-50%) rotate(540deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); }
}
#keyframes spinRed {
0% { transform: translate(-50%,-50%) rotate(0deg); }
60% { transform: translate(-50%,-50%) rotate(540deg); }
100% { transform: translate(-50%,-50%) rotate(1080deg); }
}
/*Orange Arc Animation*/
.orangeSpin {
-webkit-animation:spinOrange 5s linear infinite;
-moz-animation:spinOrange 5s linear infinite;
-o-animation:spinOrange 5s linear infinite;
animation:spinOrange 5s linear infinite;
}
#-o-keyframes spinOrange {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(-720deg); }
}
#-moz-keyframes spinOrange {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(-720deg); }
}
#-webkit-keyframes spinOrange {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(-720deg); }
}
#keyframes spinOrange {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(-720deg); }
}
/*Yellow Arc Animation*/
.yellowSpin {
-webkit-animation:yellowSpin 10s linear infinite;
-moz-animation:yellowSpin 10s linear infinite;
-o-animation:yellowSpin 10s linear infinite;
animation:yellowSpin 10s linear infinite;
}
#-o-keyframes yellowSpin {
0% { -o-transform: translate(-50%,-50%) rotate(-0deg); }
50% {-o-transform: translate(-50%,-50%) rotate(-380deg);}
100% { -o-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#-moz-keyframes yellowSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(-0deg); }
50% {-moz-transform: translate(-50%,-50%) rotate(-380deg);}
100% { -moz-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#-webkit-keyframes yellowSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(-0deg); }
50% {-webkit-transform: translate(-50%,-50%) rotate(-380deg);}
100% { -webkit-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#keyframes yellowSpin {
0% { transform: translate(-50%,-50%) rotate(-0deg); }
50% {transform: translate(-50%,-50%) rotate(-380deg);}
100% { transform: translate(-50%,-50%) rotate(-1080deg); }
}
/*Green Arc Animation*/
.greenSpin {
-webkit-animation:greenSpin 10s linear infinite;
-moz-animation:greenSpin 10s linear infinite;
-o-animation:greenSpin 10s linear infinite;
animation:greenSpin 10s linear infinite;
}
#-o-keyframes greenSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-moz-keyframes greenSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-webkit-keyframes greenSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); }
}
#keyframes greenSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(1080deg); }
}
/*Blue Arc Animation*/
.blueSpin {
-webkit-animation:blueSpin 10s linear infinite;
-moz-animation:blueSpin 10s linear infinite;
-o-animation:blueSpin 10s linear infinite;
animation:blueSpin 10s linear infinite;
}
#-o-keyframes blueSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
50% {-o-transform: translate(-50%,-50%) rotate(-530deg);}
100% { -o-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#-moz-keyframes blueSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
50% {-moz-transform: translate(-50%,-50%) rotate(-530deg);}
100% { -moz-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#-webkit-keyframes blueSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
50% {-webkit-transform: translate(-50%,-50%) rotate(-530deg);}
100% { -webkit-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#keyframes blueSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
50% {transform: translate(-50%,-50%) rotate(-530deg);}
100% { transform: translate(-50%,-50%) rotate(-1080deg); }
}
/*Indigo Arc Animation*/
.indigoSpin {
-webkit-animation:indigoSpin 10s linear infinite;
-moz-animation:indigoSpin 10s linear infinite;
-o-animation:indigoSpin 10s linear infinite;
animation:indigoSpin 10s linear infinite;
}
#-o-keyframes indigoSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-moz-keyframes indigoSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-webkit-keyframes indigoSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); }
}
#keyframes indigoSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(1080deg); }
}
/*Violet Arc Animation*/
.violetSpin {
-webkit-animation:violetSpin 10s linear infinite;
-moz-animation:violetSpin 10s linear infinite;
-o-animation:violetSpin 10s linear infinite;
animation:violetSpin 10s linear infinite;
}
#-o-keyframes violetSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(360deg); }
}
#-moz-keyframes violetSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(360deg); }
}
#-webkit-keyframes violetSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(360deg); }
}
#keyframes violetSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}
CodePen: http://codepen.io/Cole-Campbell/pen/MJVxdK

You can use vendor prefix for transform like below for all. It's working for me.
-webkit-transform: translate(-50%,-50%);
-webkit-transform: -webkit-translate(-50%,-50%);
You can also check here caniuse.com for vendor browser support.

Two Separate Bouncing Arrows Using CSS

Is there a way to have two arrows "bouncing" in separate directions using CSS?
I have the following code on my site (domainmarket.io), which produces one bouncing arrow (which can be seen on the top left-hand corner), but I would like another arrow bouncing in another direction, but can't figure out how.
HTML
<div class="arrow bounce"></div>
<div class="topbarleft">
<a href="javascript:showhide('uniquename')">
<p><?php echo wp_kses_post( $ocin_topbar_text ); ?></p>
</a>
<div class="rightarrow bounceright"></div>
</div>
CSS
#-webkit-keyframes bounce{
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
60% {
-webkit-transform: translateX(-15px);
transform: translateX(-15px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0);
}
40% {
transform: translateX(-30px);
}
60% {
transform: translateX(-15px);
}
}
#keyframes bounce{
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
60% {
-ms-transform: translateX(-15px);
transform: translateX(-15px);
}
}
#-webkit-keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(30px)!important;
transform: translateX(30px)!important;
}
60% {
-webkit-transform: translateX(15px)!important;
transform: translateX(15px)!important;
}
}
#-moz-keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0);
}
40% {
transform: translateX(30px)!important;
}
60% {
transform: translateX(15px)!important;
}
}
#keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(30px) !important;
transform: translateX(30px)!important;
}
60% {
-ms-transform: translateX(15px)!important;
transform: translateX(15px)!important;
}
}
.arrow {
margin-top:0px;
width: 24px;
height: 24px;
float: left;
margin-right: 10px;
background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrow-1.png');
background-repeat: no-repeat;
}
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
.bounceright {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
.rightarrow.bounceright {
background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrowright.png');
background-repeat: no-repeat;
float: left;
width: 24px;
height: 24px;
display: inline-block;
}
As you can see in my CSS code, I've tried to change the #keyframes to bounceright to see if that would work, but it hasn't.

Got it figured out!
In the CSS file
.bounceright {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
SHOULD BE
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}

Somehow, you adding !important to the bounceright keyframes disabled them. Remove it and it works.
Declarations in #keyframes that are marked with !important are ignored. See here: https://developer.mozilla.org/en/docs/Web/CSS/#keyframes#!important_in_a_keyframe
So here is the end result:
#keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(30px);
transform: translateX(30px)
}
60% {
-ms-transform: translateX(15px);
transform: translateX(15px);
}
}
Edit: also, as the author of the question explained, change "bounce" with "bounceright" in the .bounceright CSS rule:
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
However, I found a much simpler solution to all of this: instead of using another arrow and another class, just use the same. So instead of:
<div class="rightarrow bounceright"></div>
use
<div class="reverse"><div class="arrow bounce"></div></div>
with the CSS rule:
.reverse {
transform: rotate(180deg);
display:inline-block;
}
This way there is no duplication of the same code just to reverse the direction of the arrow.

Css bounce animation not working, Why?

I am creating scroll top icon just like demo: http://demo.themeum.com/html/eshopper/.
Here in demo scroll top icon is bouncing infinite. I want to create this one for my page also.
But i can't figure out why my effort not working? Fiddle
CSS:
a#scrollUp {
bottom: 0px;
right: 10px;
padding: 5px 10px;
background: #FE980F;
color: #FFF;
-webkit-animation: bounce 2s ease infinite;
animation: bounce 2s ease infinite;
}

you've missed out the declare keyframe animation in your css, update your css with the below
CSS
a#scrollUp {
animation: 2s ease 0s normal none infinite bounce;
background: none repeat scroll 0 0 #fe980f;
bottom: 0;
color: #fff;
padding: 5px 10px;
right: 10px;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-30px);}
60% {-moz-transform: translateY(-15px);}
}
#-o-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-30px);}
60% {-o-transform: translateY(-15px);}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.animated.bounce {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
}
Fiddle Demo

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!