<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1> <div class="animated fadeInLeft">TWO</div><div class="animated fadeInRight">SIDES</div> </h1> <p class="animated fadeInUp delay-1">Title animation</p> <footer>Reload the frame to see it again. Using <a href="https://daneden.github.io/animate.css/" target="_blank">animate.css</a></footer>

html, body { height: 100%; font-family: 'Varela Round' sans-serif; text-align: center; } h1 { margin-top: 5%; font-size: 3rem; display: inline-block; } h1 div { position: relative; float: left; } h1 div:first-child { color: #3498db; margin-right: 1rem; } p { font-size: 1.2rem; color: gray; text-transform: uppercase; } .delay-1 { -moz-animation-delay: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; } footer { position: absolute; bottom: 2rem; width: 100%; }