2

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

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

为了解决这个问题，我将下一行文本放入 an 中<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

4

4 回答 4

3

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

animation-fill-mode:both;

到您的h2（带有必要的前缀）。这样，您不会在动画之外将其设置为零宽度，因此不支持此 CSS 的浏览器将显示标题（我猜这就是您所追求的）。看到这个小提琴。

动画填充模式：

指定 CSS 动画在执行前后应如何将样式应用于其目标

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

于 2013-04-10T12:28:24.853 回答
1

由于评论已经包含一个解决方案，也许这可能是另一种方法 - 通过使用超时并visibility: hidden在开始时设置（为了简化，我只是使用 jQuery 来设置可见性）。

包括以下 CSS 规则：

.content {
    visibility: hidden;
}

作为 JavaScript，您将拥有：

window.setTimeout(function() {
    $('#contentdiv h1').css('visibility', 'visible');
}, 100);

window.setTimeout(function() {
    $('#contentdiv h2').css('visibility', 'visible');
}, 3100);

见jsFiddle

于 2013-04-10T12:21:17.407 回答
1 

p
{
  font:500 22px consolas;    
  width:20ch;
  white-space:nowrap;
  overflow:hidden;
  animation:type 5s steps(20) infinite;
}
@keyframes type
{
  0%{ width:0; } 
}
<p>Text Type Animation</p>

于 2016-04-06T12:50:19.357 回答
0

不完全是OP的问题，但如果其他人觉得这很有用：

我希望能够对文本段落进行键入动画，单个<p>标签可能包含会换行的文本，并产生未知数量的实际行。对标签本身应用一个简单的线性动画是p行不通的，所以相反，我采用了几个“隐藏”元素的方法，这些元素将覆盖文本段落，每一行高，然后我会对每个元素进行动画处理，这样他们会收缩，从他们下面的文本行中露出字符。

HTML 如下所示：

<div class="container">
<!-- container div is required to set absolute positions within it, so that .typing and .hiders exactly overlap -->

  <p class="typing">
    This paragraph of text will be animated 
    with a "typewriter" style effect, and it 
    will continue to work even if it splits across 
    multiple lines.  Well, in this case, up to a 
    maximum of 5 lines, but you get the picture.
  </p>

  <div class="hiders">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>

</div>

您需要一个容器，并将.typing元素和.hidersusingabsolute放置在彼此之上：

.container {
  position: relative;
  font-family: Consolas, monospace;  
}
.typing {
  position: absolute;
  top: 0;
  margin: 0;
  z-index: -1;
}
.hiders {
  margin: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

并且动画被应用于每个p内部.hiders：

.hiders p {
  position: relative; 
  clear: both; 
  margin: 0;
  float: right; /* makes animation go left-to-right */
  width:0; /* graceful degradation: if animation doesn't work, these are invisible by default */
  background: white; /* same as page background */
  animation: typing 2s steps(30, end);
  animation-fill-mode: both;  /* load first keyframe on page load, leave on last frame at end */
}

.hiders p:nth-child(2) {
  animation-delay: 2s;
}
.hiders p:nth-child(3) {
  animation-delay: 4s;
  /* etc */

这是最后的小提琴：

https://jsfiddle.net/hjwp/514cLzxn/

灵感来源：Lea Verou

于 2016-03-18T10:56:49.080 回答