CODEWITHSUNDEEP
cssanimation
lilsizzo
lilsizzo

Reputation: 366

Increase the speed for animation css3

.bg-grass{
width: 100%; 
height: 290px; 
background-size: :100%;
background-image: url(../graphic/background/001.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 20s linear infinite;
-ms-animation: animatedBackground 20s linear infinite;
-moz-animation: animatedBackground 20s linear infinite;
-webkit-animation: animatedBackground 20s linear infinite;

}

.grass-speed2{
animation: animatedBackground 5s linear infinite;
-ms-animation: animatedBackground 5s linear infinite;
-moz-animation: animatedBackground 5s linear infinite;
-webkit-animation: animatedBackground 5s linear infinite ;

}

I have two css classes which one is to have a normal animation and another to make it faster. The scenario would be that at certain time, the grass-speed2 class would be added into bg-grass to make the speed faster. It works fine in firefox but its not working in chrome. Am not sure why. Also is there a way to make it continue which background position it is currently at when the speed is being increased?

EDIT 1

I have forgotten to add in the keyframe css

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

}

Upvotes: 1

Views: 1193

Answers (2)

Jimba Tamang
Jimba Tamang

Reputation: 1335

Please upload your code some where and make a demo so that we can figure-out the real problem. Just a quick note, remember to add browser vender prefix before keyframe css as well:

@-webkit-keyframes animatedBackground{...}
@-moz-keyframes animateBackground{...}
@-o-keyframes animateBackground{....}

Probably this may solve your problem.

Enjoy css keyframe animation!

Upvotes: 0

lindsay
lindsay

Reputation: 972

This might be better handled through the use of animation key-frames. Instead of using different classes, try perhaps using different percentages in the key-frames combined with seconds. Here is an example using top. Of course, you can replace this (or add more) with the more appropriate animation type. 

@keyframes animatedTop {
    0% {
        top: 0;
    }
    90% {
        top: 5px;
    }
    100% {
        top: 8px;
    } 
}

Remember to include the prefixes.

/* @-webkit-
   @-moz-
   @-o-
*/

And you can call your animation by using. 

.myClass {
    animation: animatedTop 15s;
}

Upvotes: 3

Related Questions