CSS打字动画停止重复并保留内容，多句依次实现求助

核心修改方向： #

• 移除动画无限循环，添加状态保持属性
• 为每个动态文本设置递增延迟实现依次动画
• 重构CSS消除重复代码

1. 让动画仅执行一次并保留内容 #

在动画属性中去掉infinite，添加forwards参数，这样动画结束后元素会固定在最后一帧的状态：

/* 示例：打字动画仅执行一次并保留结果 */
animation: typing 3.2s steps(15) forwards;

2. 四个句子依次完成动画并全部保留 #

为每个句子的打字动画设置递增的延迟时间，确保前一个动画完成后再启动下一个。同时移除原有的slide动画（因为不需要隐藏已完成的句子），调整布局让所有句子完成后都保留在页面上。

3. 消除CSS代码重复 #

将重复的.wrapper1-.wrapper4、.static-txt、.dynamic-txts样式合并为通用类，仅保留每个元素的独特样式（如位置、延迟）。

修改后的完整代码 #

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quicksand';
    background-image: url('images/websitesbackground.jpg');
}
.header {
    margin-top: -15px;
}
.logo {
    font-family: 'Quicksand';
    font-weight:lighter;
    margin-top: -10px;
    border: black 3px none;
    padding: 3px 3px;
    height: 100px;
    width: 350px;
    position: absolute;
    margin-left: -20px;
    margin-top: -180px;
}
/* 通用wrapper样式，替代重复的wrapper1-4 */
.wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 10%;
    margin-top: 7%;
}
/* 第一个wrapper单独设置顶部间距 */
.wrapper:first-child {
    margin-top: 200px;
}
.wrapper .static-txt {
    color: #121212;
    font-size: 193%;
    font-weight: 400;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
    0px -4px 10px rgba(255,255,255,0.3);
}
.wrapper .dynamic-txts {
    margin-left: 10px;
    line-height: 1.2; /* 修复原负数值导致的布局问题 */
}
.dynamic-txts li {
    color: #121212;
    list-style: none;
    font-size: 30px;
    font-weight: 500;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
    0px -4px 10px rgba(255,255,255,0.3);
    margin-bottom: 10px; /* 增加句子间距 */
}
/* 为每个句子设置递增的动画延迟 */
.dynamic-txts li:nth-child(1) span::after {
    animation: typing 3.2s steps(15) forwards;
}
.dynamic-txts li:nth-child(2) span::after {
    animation: typing 3.2s steps(15) forwards 3.2s;
}
.dynamic-txts li:nth-child(3) span::after {
    animation: typing 3.2s steps(15) forwards 6.4s;
}
.dynamic-txts li:nth-child(4) span::after {
    animation: typing 3.2s steps(15) forwards 9.6s;
}
.dynamic-txts li span {
    position: relative;
}
.dynamic-txts li span::after {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background: url('images/websitesbackground.jpg');
    border-left: 2px solid black;
}
@keyframes typing {
    100% {
        left: 100%;
        margin: 0 -35px 0 35px;
        border-left: none; /* 动画结束后隐藏光标 */
    }
}
.img {
    border-radius: 50%; /* 用百分比实现圆形更通用 */
    margin-left: 59%;
    margin-top: -44.3%;
    height: 600px;
}

关键修改说明 #

• 移除了原slide动画：不需要隐藏已完成的句子，改为保留所有内容
• 为每个句子的光标动画设置animation-delay：按3.2s的间隔依次启动，确保顺序执行
• 所有动画添加forwards：完成后保持最终状态，打字结束后隐藏光标边框
• 合并重复样式：用通用类减少代码冗余，提升可维护性

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