如何让打字机动画结束后3秒隐藏闪烁光标？求代码优化建议

一、实现光标延迟消失 #

要实现打字动画结束后3秒光标消失，可新增一个零时长动画，在打字完成+3秒的时间点触发，将光标边框设为透明并保持状态。修改后的完整代码如下：

修改后的CSS代码 #

.typewriter {
    display: inline-block;
}

.typewriter h1 {
    overflow: hidden;
    border-right: .15em solid black;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    /* 组合动画：打字+无限闪烁+延迟隐藏光标 */
    animation:
        typing 3.5s steps(30, end) forwards,
        blink .75s step-end 0s infinite,
        hide-cursor 0s linear 6.5s forwards;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    0%, 100% {
        border-color: black;
    }
    50% {
        border-color: transparent;
    }
}

/* 新增隐藏光标动画 */
@keyframes hide-cursor {
    to {
        border-right-color: transparent;
    }
}

原理说明 #

• typing动画时长3.5秒，forwards属性保持动画结束后的宽度（100%），确保文本完全显示。
• blink动画从0秒开始无限循环，实现光标闪烁效果。
• hide-cursor是零时长动画，在3.5s（打字时长）+3s（延迟）=6.5s时触发，将光标边框设为透明，forwards让这个状态永久保持，最终实现光标消失。

二、代码优化建议 #

1. 用CSS变量统一管理参数 #

将动画相关的可配置项抽成变量，方便后续调整和维护：

:root {
    --cursor-width: .15em;
    --cursor-color: black;
    --typing-duration: 3.5s;
    --blink-interval: .75s;
    --cursor-hide-delay: 3s;
    --letter-spacing: .15em;
}

.typewriter h1 {
    border-right: var(--cursor-width) solid var(--cursor-color);
    letter-spacing: var(--letter-spacing);
    animation:
        typing var(--typing-duration) steps(auto, end) forwards,
        blink var(--blink-interval) step-end 0s infinite,
        hide-cursor 0s linear calc(var(--typing-duration) + var(--cursor-hide-delay)) forwards;
}

@keyframes blink {
    0%, 100% {
        border-color: var(--cursor-color);
    }
    50% {
        border-color: transparent;
    }
}

2. 优化steps参数适配不同文本 #

将固定步数steps(30, end)改为steps(auto, end)，让浏览器根据文本实际长度自动计算打字步数，避免固定步数导致的动画不协调：

animation: typing var(--typing-duration) steps(auto, end) forwards;

3. 提升浏览器兼容性 #

添加WebKit前缀适配旧版浏览器：

.typewriter h1 {
    -webkit-animation:
        typing var(--typing-duration) steps(auto, end) forwards,
        blink var(--blink-interval) step-end 0s infinite,
        hide-cursor 0s linear calc(var(--typing-duration) + var(--cursor-hide-delay)) forwards;
    animation:
        typing var(--typing-duration) steps(auto, end) forwards,
        blink var(--blink-interval) step-end 0s infinite,
        hide-cursor 0s linear calc(var(--typing-duration) + var(--cursor-hide-delay)) forwards;
}

@-webkit-keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@-webkit-keyframes blink {
    0%, 100% { border-color: var(--cursor-color); }
    50% { border-color: transparent; }
}
@keyframes blink {
    0%, 100% { border-color: var(--cursor-color); }
    50% { border-color: transparent; }
}

@-webkit-keyframes hide-cursor {
    to { border-right-color: transparent; }
}
@keyframes hide-cursor {
    to { border-right-color: transparent; }
}

4. 优化布局与细节 #

• 去掉无效的margin: 0 auto：.typewriter是inline-block，h1的margin:0 auto无法实现居中，若需要居中可给.typewriter添加text-align: center，或把它放在块级容器中设置容器的text-align: center。
• 用currentColor关联光标与文本颜色：将--cursor-color设为currentColor，光标颜色会自动跟随h1的文本颜色变化，无需单独调整。

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