自己写的css3的animation动画会有明显的卡顿效果?

不知道为什么自己写的css3的animation动画会有明显的卡顿效果?demo如下
https://codepen.io/bruce-zhang932/pen/BaGeEQJ

<div class="item-cf item-cf-ani"></div>
@keyframes itemCfAni {
    0% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(12deg);
    }
    50% {
        transform: rotate(0);
    }
    75% {
        transform: rotate(-12deg);
    }
    100% {
        transform: rotate(0);
    }
}

.item-cf-ani{
  animation: itemCfAni 4s ease-in-out infinite;
  transform-origin: 0 100%;
}
阅读 3.6k
3 个回答

这样子看起来更卡顿:

.item-cf-ani{
  animation: itemCfAni 4s steps(4) infinite;
  transform-origin: 0 100%;
}

这样子就不一样了:

.item-cf-ani{
  animation: itemCfAni 4s linear infinite;
  transform-origin: 0 100%;
}

这个时间函数是有关系的.

其实应该是你对动画有错误理解的,这个animation-timing-function是作用在每个keyframe关键帧上的.

animation: itemCfAni 4s ease-in-out infiniteease-in-out 的问题,对应的 CSS 属性是 animation-timing-function
需要注意的是,animation-timing-function 是在各个关键帧上指定缓动函数,因此 ease-in-out 是在 0% 到 25% 到 50% 到 75% 到 100% 上的各个关键帧之间分别应用的,呈现的效果就是各个关键帧之间的过渡会先加速再减速

看不出来有卡顿,每一阶段动画都是完整的 ease-in-out,过渡很平滑。

你的问题应该是为什么动画不连贯吧?我建议你把目标动画效果描述一下,方便大家帮你想办法。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏