Textillate Base

HTML

<link rel="stylesheet" href="http://jschr.github.io/textillate/assets/animate.css">
<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<script src="http://jschr.github.io/textillate/jquery.textillate.js"></script>
<div class="black-bar">
    
<h2 class="tlt">
    <ul class="texts">
        <li>Stressed out?</li>   
        <li>Deadlines looming?</li>
        <li>Writer's block?</li>
    </ul>
</h2>

</div>

CSS

h2.tlt {
    color: #59bce3;
}
.black-bar {
    color: rgb(255, 255, 255);
    background-color: rgb(68, 68, 68);
    border: .133em solid rgb(68, 68, 68);
    border-radius: .333em;
    max-width: 100%;
    padding: .3em .5em;
    margin-top: .5em;
    margin-bottom: .5em;
    text-align: center;
}

ul {
    list-style: none;   
}

JavaScript

$('.tlt').textillate(
   { in : {
        effect: 'flipInX'
    },
    out: {
        effect: 'flipOutY',
        sync: true
    },
    loop: true
});