To create an engaging webpage, I am leveraging Bootstrap, Animate.css, and Typed.js. The desired effect is to have a blank page initially, then make the navigation bar slide down using animate.css fadeInDown. Once this animation completes, the Typed.js line should start typing out text. Finally, when the text typing finishes, a chevron (from FontAwesome) should animate in using animate.css bounceInUp.
The current code I have written seems to trigger all these events simultaneously, and the chevron animation does not work as expected.
<body>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid animated fadeInDown">
<div class="navbar-header">
...
<li><h3><a href="#">Blog</a></h3></li>
...
</div>
</div>
</nav>
...
CSS Styling:
/*********************************************************
* *
* Custom Styles for First Panel *
* *
*********************************************************/
.jumbotron
{
width: 100%;
height: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
...
/* Define properties for text centering on the page */
.special
{
background: transparent;
color: #fff;
font-family: "ocr-a-std", san-serif;
text-transform: uppercase;
}
...