Css Loads Animations On Multiple Lines At The Same Time

I have some CSS code that creates a typing animation (see snippet). The two lines load simultaneously. How do I make them load one after another?

Solution 1:

Basically you can do that by checking whether the CSS3 Animation has ended or not like explained in this link

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

then create a function to apply the animation class and call it on jQuery ready, inside the function when the animation ended, check whether there's still another line of sentences that want to be animated

Here's the updated code that should work like what you wanted it to be

nb: this will work only if the sentences is only one line, and if it's more, you must separate it in another element like in the example, also the alert in the end is only to show that the function to animate the typing will not start anymore

nb2: I forgot that the question doesn't include the JavaScript or jQuery tag, but I hope this could help if by chance someone else needed to use the jQuery

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

functionstartAnimation() {
  $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");
    }
  });
}

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 5ssteps(50, end) 1;	
}
@keyframes type{
	from{ width: 0;}
}

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