CSS动画输入 [英] CSS animated typing

问题描述

我正在尝试制作动画，就好像我正在输入一样。为了达到这个目的，我使用了CSS动画的步骤。

动画本身工作得很好。不过，如果我想为多行文字制作动画，它们都会同时开始播放。这并不是我想要的效果。 在单一< h1> 中使用< br> 尝试切断文本，但同样是同时启动动画。）

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

我希望文字在动画开始播放之前隐藏起来，以真正实现实时打字效果。

任何人有任何想法我可以做到这一点？

HTML

 < div class =content> 
< h1>您好！我叫杰夫。< / h1> 
< h2>我创造了很酷的东西。< / h2> 
< / div> 
  

CSS

  .content h1 {
 background：white; 
不透明度：0.7; 
 white-space：nowrap; 
 overflow：hidden; 
 border-right：3px纯黑色; 
 -webkit-animation：键入2s步骤（26，结束），
 blink-caret 1s步骤结束2s; 
} 
 .content h2 {
 background：white; 
不透明度：0.7; 
 white-space：nowrap; 
 overflow：hidden; 
 border-right：3px纯黑色; 
 -webkit-animation：键入2s步骤（26，结束），
 blink-caret 1s step-end infinite; 
 -webkit-animation-delay：3s; 
} 
 
 @ -webkit-keyframes键入{
 from {width：0; } 
到{width：400px; } 
} 
 
 @ -webkit-keyframes blink-caret {
 from，to {border-color：transparent} 
 50％{border-color：black} 
} 
  

$ b

解决方案

div>

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

  animation-fill-mode：both; 
  

添加到您的 h2 （必要的前缀）。这样，您不会将其设置为动画以外的零宽度，因此不支持此CSS的浏览器将显示标题（我想这就是您要做的）。请参见小提琴。

The animation-fill-mode ：

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

在本例中设置为都表示您的 h2 的宽度在 0 之前开始执行，宽度 400px 之后。

I'm trying make an animation as if I was typing. To achieve this I'm using CSS animation 'steps'.

The animation itself works just fine. However, if I want to animate multiple lines of text, they all start playing at the same time. Wich isn't giving me the desired effect. (Tried using <br> in a single <h1>, wich cut off the text, but again started the animations simultaniously.)

To counter this, I put the next line of text in an <h2> and set an animation-delay for every line of text. Wich works, but the text is visible before the animation starts.

I want the text to be hidden until the animation starts playing, to really get that 'live typing' effect.
Anyone got any ideas on how I can achieve this?

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

Thanks in advance.

解决方案

The simplest solution is to add:

animation-fill-mode:both;

to your h2 (with the necessary prefixes). That way, you aren't setting it to a zero width outside of your animation, so browsers that don't support this CSS will display the heading (which I guess is what you're after). See this fiddle.

The animation-fill-mode:

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

Setting it to both in this instance means that your h2 will have a width of 0 before it starts executing, and a width of 400px after.

这篇关于CSS动画输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！