html - CSS 动画打字

Question

我正在尝试制作一个动画，就好像我在打字一样。为此，我使用了 CSS 动画“步骤”。

动画本身工作得很好。但是，如果我想为多行文本设置动画，它们就会同时开始播放。这没有给我想要的效果。 (尝试在单个 <br> 中使用 <h1>，它切断了文本，但再次同时启动了动画。)

为了解决这个问题，我将下一行文本放在 <h2> 中并为每一行文本设置一个动画延迟。哪个有效，但在动画开始之前文本是可见的。

我希望在动画开始播放之前隐藏文本，以真正获得“实时打字”效果。

有人对我如何实现这一目标有任何想法吗？

HTML

<div class="content"> 
    <h1>Hi there! My name is Jeff.</h1>
    <h2>And I create cool stuff.</h2>
</div>

CSS

.content h1 {
    background:white;
    opacity:0.7;
    white-space:nowrap;
    overflow:hidden;
    border-right: 3px solid black;
    -webkit-animation: typing 2s steps(26, end), 
                        blink-caret 1s step-end 2s;
}
.content h2 {
    background:white;
    opacity:0.7;
    white-space:nowrap;
    overflow:hidden;
    border-right: 3px solid black;
    -webkit-animation: typing 2s steps(26, end), 
                        blink-caret 1s step-end infinite;
    -webkit-animation-delay:3s;
}

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

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

jsFiddle

Answer 1

最简单的解决方案是添加:

animation-fill-mode:both;

到您的h2(带有必要的前缀)。这样，您就不会在动画之外将其设置为零宽度，因此不支持此 CSS 的浏览器将显示标题(我猜这就是您想要的)。参见 this fiddle .

animation-fill-mode :

specifies how a CSS animation should apply styles to its target before and after it is executing

在这种情况下将其设置为 both 意味着您的 h2 的宽度为 0 之前开始执行，宽度为 400px 之后。