Html CSS键入效果不起作用

因此，我为div中的段落编写了一段小代码，用于模拟div上悬停时的键入效果：

.about-panel:hover p {
    color: white;
    font-size: 1em;

    white-space: wrap;
    overflow: hidden;


    -webkit-animation: typing 4s steps(1000, end),
    blink-caret .5s step-end infinite alternate;
}

但它似乎不起作用？文本仅在4s末尾一次性出现

以下是动画的代码：

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

@-webkit-keyframes blink-caret {
    50% {
        border-color: transparent;
    }
}

你能帮我吗？我做错了什么

这是可以做到的。 如果您想让文本在悬停后显示，您可能需要在悬停后向其添加add类

.关于小组{ 浮动：左； } .关于p组{ 右边框：.15em实心透明； 宽度：0%； 溢出：隐藏； 空白：nowrap； } .关于面板：悬停p{ 宽度：100%； 过渡：宽度0.3s； 动画：闪烁插入符号。5s步结束无限； } @关键帧闪烁插入符号{ 从…起 到{ 边框颜色：透明 } 50% { 边框颜色：橙色 } } 在这里盘旋 世界你好

---

你大概在用Chrome？动画不再需要加前缀了。我相信大多数CSS动画仍然不是Safari的标准，因此有必要加上-webkit-prefix@尽管如此，不管你是否使用前缀，你的CSS中总是有非前缀版本。哦，我不知道，谢谢！非常感谢。我会尝试一下，然后再联系你：