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.
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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);
}
}
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.