<div class="outer_container">
<div class="container">
<div class="text">1-800-HOTLINEBLING</div>
<div class="text hidden">1-800-HOTLINEBLING</div>
<div class="text hidden">1-800-HOTLINEBLING</div>
<div class="text hidden">1-800-HOTLINEBLING</div>
<div class="text hidden">1-800-HOTLINEBLING</div>
<div class="text hidden">1-800-HOTLINEBLING</div>
<div class="text hidden">1-800-HOTLINEBLING</div>
<div class="text hidden">1-800-HOTLINEBLING</div>
<div class="text hidden">1-800-HOTLINEBLING</div>
<div class="text hidden">1-800-HOTLINEBLING</div>
</div>
</div>
.text {
font-size: 3em;
font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:normal; - See more at: http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/#sthash.9e3VMm1s.dpuf;
font-style: italic;
color: white;
}
.container {
background-color: #FCADC3;
display: inline-block;
padding: 15px;
}
.outer_container {
text-align: center;
}
.hidden {
visibility: hidden;
}
$(document).ready(function(){
var textArr = $('.text');
var i = 0;
setInterval(function(){
$(textArr[i]).removeClass('hidden');
i++;
if(i > textArr.length){
for(var j=1; j<textArr.length; j++){
$(textArr[j]).addClass('hidden');
}
i %= textArr.length;
}
}, 300);
});
This Pen doesn't use any external CSS resources.