如何实现CSS文字正弦波动画中字符的平滑旋转效果？

问题分析 #

当前已实现文字沿自定义曲线上下浮动，但字符旋转过渡生硬，核心问题：

• 旋转动画与浮动动画关键帧未同步，角度变化与位置移动脱节
• 同时使用top和独立transform: rotate()动画，存在属性覆盖风险
• 未设置旋转中心，导致旋转效果不符合预期

修复方案 #

核心修改点 #

1. 将浮动动画从top改为transform: translateY()，与旋转动画合并到同一个transform属性中，避免属性冲突
2. 同步旋转与浮动的关键帧，让旋转角度随曲线的上升/下降自然变化
3. 设置transform-origin: bottom center，让字符围绕底部中心旋转，贴合预期效果
4. 统一动画时间曲线，确保过渡平滑

修改后的完整代码 #

CSS

html, body {
    margin: 0;
    padding: 0;
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
}
.text-anim-wrapper {
    position: relative;
    overflow: hidden;
    height: 150px;
}

.text-anim {
    position: absolute;
    left: calc(100% + 200px);
    width: 20px;
    font-size: 24px;
    color: white;
    font-weight: bold;
    /* 设置旋转中心为底部中心 */
    transform-origin: bottom center;
    /* 合并位移与旋转动画，避免属性冲突 */
    animation: flight-right-to-left 6s linear infinite, curve-with-rotate 6s ease-in-out infinite;
}
/* 字符延迟保持不变 */
.text-anim:nth-child(2) { animation-delay: .1s; }
.text-anim:nth-child(3) { animation-delay: .2s; }
.text-anim:nth-child(4) { animation-delay: .3s; }
.text-anim:nth-child(5) { animation-delay: .4s; }
.text-anim:nth-child(6) { animation-delay: .5s; }
.text-anim:nth-child(7) { animation-delay: .6s; }
.text-anim:nth-child(8) { animation-delay: .7s; }
.text-anim:nth-child(9) { animation-delay: .8s; }

@keyframes flight-right-to-left {
    0% { left: 100%; }
    100% { left: -20px; }
}
/* 合并浮动与旋转的关键帧，同步位置与角度变化 */
@keyframes curve-with-rotate {
    0% {
        transform: translateY(50px) rotate(10deg);
    }
    20% {
        transform: translateY(0) rotate(-10deg);
    }
    50% {
        transform: translateY(80px) rotate(10deg);
    }
    85% {
        transform: translateY(0) rotate(-10deg);
    }
    100% {
        transform: translateY(50px) rotate(10deg);
    }
}

HTML

<div class="text-anim-wrapper">
    <div class="text-anim">V</div>
    <div class="text-anim">I</div>
    <div class="text-anim">C</div>
    <div class="text-anim">T</div>
    <div class="text-anim">O</div>
    <div class="text-anim">R</div>
    <div class="text-anim">I</div>
    <div class="text-anim">N</div>
    <div class="text-anim">E</div>
</div>

效果说明 #

修改后字符的旋转角度随曲线位置自然过渡：

• 从中间位置上升到顶部时，旋转角度从10°平滑过渡到-10°
• 从顶部下降到最低点时，旋转角度从-10°平滑过渡回10°
• 循环过程中角度与位置完全同步，实现无生硬衔接的动画效果

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