Smooth CSS transform animations

Question

I'm looking at optimising CSS animations for performance.

From what I can find out using

.item { transform: translate(-25px,-50px)

is much more efficient than

.item { left: -25px; top: -50px }

I've setup a little animation that move and rotates a box .balloon which as multiple steps to the animation. The problem is though the animation becomes very jerky, even with positioning ans rotation 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 optimised CSS, which is where the jerky animation comes in to effect

@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 for this?

I've put a CodePen together here.

Answer 1

In your animation-property, try to add a value for the animation-timing-function

Something like

animation: balloon 15s infinite linear;

would make it more smooth.