CODEWITHSUNDEEP
cssanimation
Christian
Christian

Reputation: 7419

CSS 3 Keyframes animation doesn't work in Chrome

I have a little animation which can be seen here http://jsfiddle.net/LcvS4/1/

This one is using @keyframes

@keyframes move {
     0% {
         left: 0%;
     }
     100% {
         left: 100%;
     }
 }

This works great in Firefox, but doesn't work in Chrome. I haven't figured out why. Anyone can help?

Thanks

Upvotes: 2

Views: 3379

Answers (1)

SW4
SW4

Reputation: 71140

You need to use the -webkit- vendor prefix

@-webkit-keyframes move {
     0% {
         left: 0%;
     }
     100% {
         left: 100%;
     }
 }

You'll also need to add it to any animation properties (as well as keeping those without it for support in other browsers), e.g:

-webkit-animation-name:move;

More on vendor prefixes:

CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.

The MDN article on animation is also a good read

Upvotes: 3

Related Questions