CSS旋转加载动画每圈停顿半秒 如何实现流畅无限循环效果

旋转一圈后的停顿本质是CSS动画默认属性导致的视觉效果：

• CSS animation 的默认时间函数为 ease，动画曲线是「启动慢加速→中段匀速→结束前慢减速」。你定义的旋转起点45deg、终点405deg在视觉上完全重合，上一圈结束的减速过程和下一圈启动的加速过程叠加，就会产生半秒左右的停顿错觉。
• 父级.circle上静态写死的transform: rotate(45deg)会在动画首次加载、每圈循环衔接时造成微小的角度跳变，进一步放大卡顿感。

不需要改动动画旋转角度逻辑，只需要调整两个属性：

• 给动画添加linear时间函数，让旋转全程保持匀速，彻底去掉首尾加减速效果
• 删除.circle上静态设置的transform: rotate(45deg)，把角度控制完全交给动画，避免衔接跳变

修改后的.circle核心样式：

.circle{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right:5px ;
    border-top: 1.5px solid #350cc9;
    fill:none;
    /* 删掉静态transform，动画加linear匀速 */
    position: relative;
    animation: loadanim 1.5s linear infinite;
}

改完之后旋转会全程匀速，完全没有圈末停顿的问题。

如果想要比单层旋转更有层次的丝滑效果，可以给两个伪元素也加上不同速度、不同方向的旋转动画，三层圆弧错位旋转的视觉效果会更自然，不会有机械转动的僵硬感。
完整优化后代码：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color:#1A4D2E ;
}
.circle{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right:5px ;
    border-top: 1.5px solid #350cc9;
    fill:none;
    position: relative;
    animation: loadanim 1.5s linear infinite;
    
}
.circle::before{
    content: "";
    position: absolute;
    top:2px;
    left: 5px;
    width: 30px;
    height:30px;
    border-radius: 50%;
    margin-right:5px ;
    border-top: 1.5px solid #f1f513;
    fill:none;
    animation: loadanim-reverse 1.5s linear infinite;
}
.circle::after{
    content: "";
    position: absolute;
    top:6px;
    left: 8px;
    width: 25px;
    height:25px;
    border-radius: 50%;
    margin-right:5px ;
    border-top: 1.5px solid #f30ed4;
    fill:none;
    animation: loadanim 1s linear infinite;
}
@keyframes loadanim{
    from{
        transform: rotate(45deg);
    }
    to{
        transform: rotate(405deg);
    }
}
@keyframes loadanim-reverse{
    from{
        transform: rotate(20deg);
    }
    to{
        transform: rotate(-340deg);
    }
}

<body>
    <div class="circle"></div>
</body>

注：优化版本里顺便修正了原代码中颜色值与关键字之间缺失空格的书写问题（如solid#350cc9改为solid #350cc9），避免部分老旧浏览器出现样式解析异常。

内容的提问来源于stack exchange，提问作者UmairFarooq