CSS loads animations on multiple lines at the same time - html

Question

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?
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;}
}
<div class="a">Supercalifragilisticexpialidocious<br /> Another sentence...</div>

Answer 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();
}
});
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");
}
});
}
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;}
}
<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>