CODEWITHSUNDEEP
csscss-animations
Rob
Rob

Reputation: 6380

Unable to make CSS3 animation play

I've got the code below that I want to make some div bounce. At the moment they don't seem to move at all, where am I going wrong?

Here's a fiddle

@-webkit-keyframes bounceup {
    0% { -webkit-transform:translateY(0); }
    40% { -webkit-transform:translateY(30px); } 
    60% { -webkit-transform:translateY(15px); }
}

@keyframes bounceup {
    0% { transform:translateY(0); }
    40% { transform:translateY(30px); } 
    60% { transform:translateY(15px); }
}

@-webkit-keyframes bounceleft {
    0% { -webkit-transform:translateX(0); }
    40% { -webkit-transform:translateX(-30px); }    
    60% { -webkit-transform:translateX(-15px); }
}

@keyframes bounceleft {
    0% { transform:translateX(0); }
    40% { transform:translateX(-30px); }    
    60% { transform:translateX(-15px); }
}

@-webkit-keyframes bounceright {
    0% { -webkit-transform:translateX(0); }
    40% { -webkit-transform:translateX(30px); } 
    60% { -webkit-transform:translateX(15px); }
}

@keyframes bounceright {
    0% { transform:translateX(0); }
    40% { transform:translateX(30px); } 
    60% { transform:translateX(15px); }
}

.bounceup {
  -webkit-animation-name: bounceup 2s infinite;
  animation-name: bounceup 2s infinite;
}

.bounceleft {
  -webkit-animation-name: bounceleft 2s infinite;   
  animation-name: bounceleft 2s infinite;
}

.bounceright {
  -webkit-animation-name: bounceright 2s infinite;  
  animation-name: bounceright 2s infinite;
}

Upvotes: 2

Views: 50

Answers (2)

Bram B
Bram B

Reputation: 366

I made a working copy for you:

  -webkit-animation: bounceup 5s infinite;
  animation: bounceup 5s infinite;

https://jsfiddle.net/nu78enm3/2/

and a link to the shorthand technique: http://www.w3schools.com/cssref/css3_pr_animation.asp

Upvotes: 0

Chris
Chris

Reputation: 59511

The problem seems to be with how you set your animations in your classes. You are using animation-name, but you are declaring more than just the name; you are adding values for animation-iteration-count and animation-duration as well.

Try instead:

.bounceup {
  -webkit-animation: bounceup 2s infinite;
  animation: bounceup 2s infinite;
}

.bounceleft {
  -webkit-animation: bounceleft 2s infinite;   
  animation: bounceleft 2s infinite;
}

.bounceright {
  -webkit-animation: bounceright 2s infinite;  
  animation: bounceright 2s infinite;
}

Edit:

Seems like @Harry modified his comment and pointed precisely the above. Basically you were trying to use the shorthand version of animation but for the animation-name property.

An alternative solution would be (the non-shorthand version):

.bounceup {
  animation-name: bounceup;
  -webkit-animation-name: bounceup;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

Upvotes: 3

Related Questions