Html CSS使用多个跨距键入动画

到目前为止，我们已经得到了这个

但我想要的是，在写出每个新词（span）后，光标闪烁动画将运行

当我尝试做类似的事情时

.type:after {   
    content:"_";    
    opacity: 0;     
    animation: cursor 1s infinite; 
}

它没有达到预期的效果。我认为动画中存在冲突，因为从技术上讲，我是在已经制作动画的东西中运行动画

---

如果您还需要什么，请告诉我，非常感谢

您使用的是Safari还是Chrome？我正在使用Firefox，我注意到一个问题是您的前缀不一致

下面是没有

webkit

前缀的新代码（如果需要，可以添加它们，但考虑到它对您不起作用，我假设它们不是必需的）：

工作JSBIN：

---

您使用的是Safari还是Chrome？我正在使用Firefox，我注意到一个问题是您的前缀不一致

下面是没有

webkit

前缀的新代码（如果需要，可以添加它们，但考虑到它对您不起作用，我假设它们不是必需的）：

工作JSBIN：

---

像这样？很确定这就是你想要达到的

---

我还修复了动画中的一些小故障。。有些相互重叠。

像这样吗？很确定这就是你想要达到的

---

我还修复了动画中的一些小故障。。有些相互重叠。

这里是一个类型效果，但它在动画功能中使用步骤：

您会注意到步骤设置为26，这是我的H1中的字符数

<h1>Typing Effect by Jonathan.</h1>

乔纳森的打字效果。 您可能会使用：after，但可能需要JS来计算每个单词的单词长度

此外，最好始终添加不带供应商前缀的属性，以便在支持动画属性的浏览器中使用。。与本例类似，firefox不需要供应商前缀

---

这里是一个类型效果，但它在动画功能中使用步骤：

您会注意到步骤设置为26，这是我的H1中的字符数

<h1>Typing Effect by Jonathan.</h1>

乔纳森的打字效果。 您可能会使用：after，但可能需要JS来计算每个单词的单词长度

此外，最好始终添加不带供应商前缀的属性，以便在支持动画属性的浏览器中使用。。与本例类似，firefox不需要供应商前缀

---

代码笔链接断开依赖链接断开

@-webkit-keyframes typing {
from { width: 0 }
to { width:14em }
}

@keyframes typing {
from { width: 0 }
to { width:14em }
}

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

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

body { font-family: Consolas; }

h1 { 
font-size:150%;
width:14em;
white-space:nowrap;
overflow:hidden;
border-right: .1em solid #333;

-webkit-animation: typing 13s steps(26, end), 
                    caret 0.5s step-end infinite;
animation: typing 13s steps(26, end), 
                    caret 0.5s step-end infinite;
}

<h1>Typing Effect by Jonathan.</h1>