Jump to content

CSS3 - Bounce Effect Issue


jmurph333
 Share

Recommended Posts

I am experimenting with CSS3 and the Bounce Animation. I was tesing it out and I used the W3Schools "Try It" Page to do so, and it did not work. Here is my code:

<html><style type="text/css">@-webkit-keyframes bounce { from {   left: 0px; } to {   left: 200px; }}div { -webkit-animation-name: bounce; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 10; -webkit-animation-direction: alternate;}</style><body><div><img src="/images/pulpit.jpg" alt="img"></div></body></html>

Any Obvious problems? I tried it out here: http://w3schools.com/html/tryit.asp?filename=tryhtml_introThanks in advance!

Link to comment
Share on other sites

As the CSS indicates, the effect is Webkit (Safari, Chrome) only, and not an actual CSS3 property. What browser were you using? Otherwise, it works, however you may need to add position:relative; to the CSS rules for the division to get it to do what you expect it to.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...