6

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.

Adrift
  • 58,167
  • 12
  • 92
  • 90
Matt
  • 806
  • 3
  • 12
  • 32
  • If you don't like the way the easing function is then you have to change it. This has nothing to do with performance – Zach Saucier May 01 '14 at 15:27
  • Also, you cannot move an element part of a pixel, it will be rounded (thus there is no purpose for having it in your CSS) – Zach Saucier May 01 '14 at 15:32

1 Answers1

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.

ajp15243
  • 7,704
  • 1
  • 32
  • 38
tobi
  • 789
  • 7
  • 10
  • I did try linear after seeing that ease actually eased between each step rather that creating a smooth and flowing animation loop. Linear seems a little harsh, with my original animation CSS and the and the animation set to ease, it looked alot more natural – Matt May 01 '14 at 14:09