Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Gabotronix's avatar

make css animation smoothly loop forever

Hi every body, I'm trying to make my css animation look snapier, I want it to loop forever and do so smoothly, last frame should look like 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);
  }
}
0 likes
1 reply
click's avatar
click
Best Answer
Level 35

Try this: https://jsfiddle.net/q7snwm9j/

I've changed numbers a bit to make it easier to see the effect. It goes "infinite" and to make it not "snap back" it goes from 0-50 to the size you want and from 50-100 back to it's original.

Please or to participate in this conversation.