CSS同时在多行上加载动画

Question

我有一些CSS代码可以创建一个打字动画（参见代码段）。 两条线同时加载。如何让它们一个接一个地加载？

＆＃13;

＆＃13;

body{
	background: #000;
	color: lime;
}
div.a{
	font-size: 14px;
	margin: 30px;
	white-space:nowrap;
	overflow: hidden;
	width: 30em;
	animation: type 5s steps(50, end) 1;	
}
@keyframes type{
	from{ width: 0;}
}
@keyframes blink{
	to{ opacity: .0;}
}

＆＃13;

<div class="a">Supercalifragilisticexpialidocious<br /> Another sentence...</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

基本上你可以通过检查CSS3 Animation是否已经结束来完成此操作

  

http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

然后创建一个函数来应用animation class并在动画结束时在函数内部jQuery ready调用它，检查是否还有另一行想要动画的句子

这里的更新代码应该像您希望的那样工作

nb：只有当句子只有一行时才会起作用，如果更多，你必须将它与另一个元素分开，就像示例一样，最后的警告也只是表明打字动画的功能将不再启动

nb2：我忘记了这个问题并不包含JavaScript或jQuery标记，但我希望如果有其他人需要使用{jQuery标记，这可能有所帮助1}}

＆＃13;

＆＃13;

var $typeAnimation;
$(function(){
  $typeAnimation = $(".view").first();
  if($typeAnimation.size() > 0) {
    startAnimation();
  }
});

function startAnimation() {
  $typeAnimation.addClass("animate");
  $typeAnimation.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
  function(e) {
    $typeAnimation = $typeAnimation.next(".view");
    if($typeAnimation.size() > 0) {
      startAnimation();
    } else {
      alert("No More Sentence to be animated");
    }
  });
}

＆＃13;

body{
	background: #000;
	color: lime;
}
.view {
    display: none;
}
.view.animate{
    display: block;
	font-size: 14px;
	margin: 30px;
	white-space:nowrap;
	overflow: hidden;
	width: 30em;
	animation: type 5s steps(50, end) 1;	
}
@keyframes type{
	from{ width: 0;}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="view">Supercalifragilisticexpialidocious</div>
<div class="view">Another sentence...</div>
<div class="view">Yet Another sentences...</div>
<div class="view">And Also Another Final sentence...</div>

＆＃13;

＆＃13;

＆＃13;