CSS3动画 - 打字效果

Question

我正在寻找一种打字效果的解决方案＆＃34;用于文本列表的动画。

很棒的打字效果插件@Paulund

的例子

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

＆＃13;

＆＃13;

.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; }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何让它循环显示要输入的项目列表？注意：我希望前一项消失，所以一次只能有一项。

我们以低价出售 .....

将 .... 替换为以下内容，并在输入效果中写入，循环显示。

• 第1项
• 第2项
• 第3项
• 第4项

Answer 1

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

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;