平滑的 CSS 变换动画

Question

我正在考虑优化 CSS 动画以提高性能。

从我可以找到的使用

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

效率比

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

我已经设置了一个小动画，可以移动和旋转一个框.balloon，作为动画的多个步骤。问题是动画变得非常生涩，即使为每一步声明了定位和旋转

这是我的标准 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) }
}

这是我优化的 CSS，这是生涩动画生效的地方

@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) }
}

是否有替代解决方案？

我已经把 CodePen 放在一起了。

Answer 1

在您的动画属性中，尝试为animation-timing-function

就像是

animation: balloon 15s infinite linear;

会让它更顺利。