I am looking for optimizing CSS animations for performance.
What can I learn using
.item { transform: translate(-25px,-50px)
much more effective than
.item { left: -25px; top: -50px }
I installed a small animation that moves and rotates the box .balloon, which is like a few steps to the animation. The problem is that the animation becomes very jerky, even with the positioning of the rotation ans declared for each step.
Here is my standard CSS
@keyframes balloon {
0%,100% { left:809px; top:50px; transform: rotate(0deg) }
10% { transform: rotate(-9deg) }
25%,75% { top:25px }
50% { left:235px;top:75px }
45% { transform: rotate(3deg) }
75% { transform: rotate(12deg) }
}
This is my optimized CSS in which jerky animations arise for
@keyframes balloon {
0% { transform: translate(0,0) rotate(0deg) }
10% { transform: translate(-57.5px,-10px) rotate(-9deg) }
25% { transform: translate(-143.75px,-25px) rotate(-4deg) }
45% { transform: translate(-517.5px,22.5px) rotate(3deg) }
50% { transform: translate(-575px,25px) rotate(4.5deg) }
75% { transform: translate(-287.5px,-25px) rotate(12deg) }
100% { transform: translate(0,0) rotate(0deg) }
}
Is there an alternative solution to this?
I put CodePen together here .
source
share