Shine Effect HTML动画单次过渡及显示异常问题咨询

方案1：实现单次触发的Shine效果 #

HTML结构保持不变，修改CSS如下：

<div class="content">
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>

.content p{
    font-size: 20px;
    line-height: 35px;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;
    /* 调整渐变：两侧为黑色匹配文本默认色，中间为白色高光 */
    background: linear-gradient(to right, #000 0%, #fff 50%, #000 100%);
    /* 设置背景尺寸为200%，足够覆盖文本实现滑动 */
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 用forwards替代infinite，动画仅执行一次并保留最终状态 */
    animation: shine 2s forwards linear;
}

@keyframes shine {
    0% {
        /* 初始位置在文本左侧外部，高光从不可见区域进入 */
        background-position: -100% 0;
    }
    100% {
        /* 结束位置在文本右侧外部，高光滑出后文本恢复正常黑色 */
        background-position: 200% 0;
    }
}

改动说明： #

• 调整渐变结构：让渐变两侧与文本默认颜色一致，避免滑动时两侧出现突兀过渡。
• 适配背景尺寸：background-size: 200% 100%保证高光滑动的连贯性，不受文本长度限制。
• 控制动画次数：forwards替代infinite，实现单次触发后保持最终状态。
• 优化滑动范围：从文本左侧外滑到右侧外，确保高光仅在文本区域显示。

方案2：循环触发但无两侧过渡 #

如果需要动画循环播放，同时避免两侧过渡残留，修改动画部分即可：

.content p{
    /* 基础样式与方案1一致 */
    animation: shine-loop 2s infinite linear;
}

@keyframes shine-loop {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

改动说明： #

• 保留infinite实现循环，同时通过background-position从-100%到200%的滑动路径，让高光每次都从文本左侧外进入、右侧外滑出，全程仅文本区域显示高光效果。

原代码问题分析： #

1. 渐变设置不合理：原渐变白色占比仅10%，未匹配文本默认颜色，导致两侧出现异常过渡。
2. 关键帧逻辑错误：固定background-position: 600px无法适配不同长度文本，且60%-100%的停顿导致文本停在中间/侧边。
3. 循环属性不符合需求：infinite导致动画重复播放，违背“仅触发一次”的要求。

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