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放在一起here。

Answer 1

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

添加值

像

这样的东西

animation: balloon 15s infinite linear;

会让它变得更加流畅。

平滑的CSS变换动画

1 个答案: