css animate属性写的平移动画卡顿

Question

这是我用了的属性，还少了什么？

.topDiv .cloundBig{
    width: 10rem;
    animation-duration:8s;
    animation-name: cloundBig;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@-webkit-keyframes cloundBig {
    0% { margin-left: 50% }
    100% { margin-left: 60% }
}

Answer 1

平移建议使用 transform ,因为margin会引起重绘 消耗性能

Answer 2

animation: name duration timing-function delay iteration-count direction;

还有 卡顿发生在什么浏览器？

Answer 3

这个卡顿应该不是animate带来的，你在动画里面做margin处理，意味着在0~100的过程中，浏览器需要不断重排，建议使用css3语法，traslate 2d或者3d，这两个在浏览器上的帧率因浏览器不同，可以查一下，但都要比直接使用margin要快