CODEWITHSUNDEEP
htmlcssanimationcss-animations
gabogabans
gabogabans

Reputation: 3553

make css animation smoothly loop forever

I'm trying to make my CSS animation look snappier. I want it to loop forever and do so smoothly. The last frame should look like the first frame but right now, when the animation finishes, it SNAPS back to the original state. I want to use this effect form my custom slider.

Here is my code:

.move {
  animation: move 30s ease;
  -ms-animation: move 30s ease; 
  -webkit-animation: move 30s ease; 
  -moz-animation: move 30s ease;
}


@keyframes move {
  0% {
    -webkit-transform-origin: bottom top;
    -moz-transform-origin: bottom top;
    -ms-transform-origin: bottom top;
    -o-transform-origin: bottom top;
    transform-origin: bottom top;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -o-transform: scale(1.0);
    -moz-transform: scale(1.0);
  }

  100% {
    transform: scale(1.3);
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
}

Upvotes: 1

Views: 3692

Answers (1)

Examath
Examath

Reputation: 176

You can set the animation-iteration-count to infinite to make it run forever, then use the animation-direction property to alternate, which plays the animation forwards, ten backwards. Here's the shorthand properties;

-ms-animation: move 30s ease infinite alternate; 
-webkit-animation: move 30s ease infinite alternate; 
-moz-animation: move 30s ease infinite alternate;

Credits: w3schools, which has more information on how animations work.

Upvotes: 1

Related Questions