不知道为什么自己写的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%;
}
这样子看起来更卡顿:
这样子就不一样了:
这个时间函数是有关系的.
其实应该是你对动画有错误理解的,这个animation-timing-function是作用在每个keyframe关键帧上的.