如何在CSS关键帧动画结束后修改字体样式？

问题根源 #

你遇到两个核心问题：

• CSS动画默认结束后会重置回初始样式，所以100%关键帧里的属性不会保留。
• 你的文字颜色是通过background-clip: text+-webkit-text-fill-color: transparent实现的渐变文字，直接加background-color不会生效——因为文字本身是透明的，只有背景渐变会被裁剪到文字区域。

解决方案：不用额外动画，只需两步修改 #

1. 让动画结束后保留最后一帧样式

给.contact-text h2和.contact-text p添加animation-fill-mode: forwards，这个属性会强制元素在动画结束后停在最后一个关键帧的样式。

2. 调整关键帧里的文字样式

因为原来的文字是渐变透明效果，要改颜色和大小，需要调整渐变或者取消透明填充：

• 如果想改成纯色文字：在100%关键帧里，去掉渐变背景，设置color属性，同时取消-webkit-text-fill-color: transparent。
• 如果还要保留渐变但调整样式：直接修改渐变参数，同时调整font-size。

修改后的完整代码示例 #

CSS部分

.contact-container {
    background-color: black;
    text-align: center;
} 

.contact-text h2 {
    font-weight: 700;
    text-align: center;
    font-size: 40px;
    font-family: 'Poppins', sans-serif;   
    background: linear-gradient(90deg, #000, #fff, #000);
    letter-spacing: 5px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-size: 80%;
    animation: shine 5s linear forwards; /* 添加forwards */
    animation-iteration-count: 1;
    position: relative;  
}
 
.contact-text p {
    font-weight: 700;
    text-align: center;
    font-size: 20px;
    font-family: Hack, sans-serif;
    text-transform: uppercase;
    background: linear-gradient(90deg, #000, #fff, #000);
    letter-spacing: 5px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-size: 80%;
    animation: shine 5s linear forwards; /* 添加forwards */
    animation-iteration-count: 1;
    position: relative;
}

@keyframes shine {
    0% {
        background-position-x: -500%;        
    }

    100% {
        background-position-x: 500%;
        /* 修改为纯色文字 */
        background: none;
        -webkit-text-fill-color: unset;
        color: red;
        font-size: 50px;
    }
}

补充：单独控制不同元素的最终样式 #

如果想让h2和p的最终样式不一样，可以分别定义两个动画：

@keyframes shine-h2 {
    0% { background-position-x: -500%; }
    100% {
        background-position-x: 500%;
        background: none;
        -webkit-text-fill-color: unset;
        color: red;
        font-size: 50px;
    }
}

@keyframes shine-p {
    0% { background-position-x: -500%; }
    100% {
        background-position-x: 500%;
        background: none;
        -webkit-text-fill-color: unset;
        color: blue;
        font-size: 28px;
    }
}

然后给h2设置animation: shine-h2 5s linear forwards，p设置animation: shine-p 5s linear forwards即可。

关于是否需要第二个动画 #

不需要额外启动第二个动画，animation-fill-mode: forwards就能让第一个动画结束后保留最终样式，是最简洁的方案。只有当你需要更复杂的后续动画逻辑时，才需要用JS监听animationend事件触发第二个动画，你的需求用forwards完全足够。

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