CODEWITHSUNDEEP
htmlcssgoogle-chromecss-animations
ServerSideSkittles
ServerSideSkittles

Reputation: 2973

CSS animations wont work in Chrome

I have inserted some CSS animations. They work fine in FireFox but not Chrome. Is there any way of fixing this?

Here is my code I have a background image which moves slow. At the bottom there is an animation that moves faster.

body {
  background-image: url('images/bg.png');
  animation: animatedSky 40s linear infinite;
}

@keyframes animatedSky {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

#bottom { 
   width: 100%; 
   height: 40px; 
   background-image: url('images/bottom.png');
   background-position: 0px 0px;
   background-repeat: repeat-x;
   animation: animatedBackground 8s linear infinite;
   position: absolute;
   margin-top: 600px;
   }

@keyframes animatedBackground {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
    }

Upvotes: 0

Views: 150

Answers (1)

Cjmarkham
Cjmarkham

Reputation: 9700

For keyframes in chrome and safari you need to use the webkit prefix:

@-webkit-keyframes

Upvotes: 3

Related Questions