console
<div class="container">
<div class="content-holder">
<span><p> Hello </p></span>
<span>
<ul class="word-slider">
<li>World!</li>
<li>There!</li>
<li>Kath!</li>
</ul>
</span>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:700);
/*
MAXIMUM WORD CAN BE SLIDE IS ONLY 3
*/
body {
background: #1c1c1c;
font: 700 40px 'Titillium Web', sans-serif;
color: #fff;
}
.container {
width: 340px;
margin-left: auto;
margin-right: auto;
margin-top: 25%;
text-align: center;
padding-left: 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.content-holder:before {
content: '<';
float: left;
margin-top: -10px;
margin-right: 10px;
color: rgb(142, 101, 4);
}
.content-holder:after {
content: '/>';
float: left;
margin-top: -10px;
margin-left: 10px;
color: rgb(142, 101, 4);
}
p,
ul {
line-height: 42px;
margin-top: 0px;
}
span {
display: inline;
float: left;
}
ul.word-slider {
list-style: none;
margin-left: -30px;
}
.content-holder {
height: 50px;
overflow: hidden;
}
ul li {
padding: 5px;
}
ul.word-slider {
animation: change 5s 1 alternate;
}
@keyframes change {
0% {
margin-top: -5px;
}
25% {
margin-top: -57px;
}
50% {
margin-top: -107px;
}
100% {
margin-top: -5px;
}
}