jquery - CSS3动画——打字效果

Question

我正在为文本列表寻找“打字效果”动画的解决方案。

出色的打字效果插件示例 @Paulund

http://www.paulund.co.uk/playground/demo/typing-effect/

.css-typing
{
    width: 30em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
}

@keyframes type{
    from { width: 0; }
}

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

<p>We offer<span class="css-typing">Item 1 to Item 3</span> at low cost prices</p>

我如何让它循环遍历要输入的元素列表？注意:我希望上一个元素消失，所以一次只有一个元素。

我们以低成本提供.....

将 .... 替换为以下内容并写入打字效果，循环遍历它们。

• 元素 1
• 第 2 项
• 第 3 项
• 第 4 项

Answer 1

此处 Span 标签不起作用，您可以使用其他标签。

.offer{
    width: 100%;
display: block;
float: left;
list-style:none;
}
li {
float: left;
width: 100%;
}
p {
float: left;
}
.css {
width: 46px;
/* float: left; */
white-space: nowrap;
overflow: hidden;
-moz-animation-duration: 5s;
-webkit-animation-duration: 5s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}

@-moz-keyframes slidein {
  from {

width:1px;
  }
  
  to {

width:46px;
  }
}

@-webkit-keyframes slidein {
  from {
   
width:1px;
  }
  
  to {

width:46px;
  }
}

<ul class="offer">
<li><p> We offer:</p><p class="css">Item 1</p><p> at low cost prices</p></li>
<li><p> We offer:</p><p class="css">Item 1</p><p> at low cost prices</p></li>
 <li><p> We offer:</p><p class="css">Item 1</p> <p>at low cost prices</p></li>
</ul>