I Love
<div class="cp_anime15">
<p>I Love</p>
<div class="scroller">
<div class="inner">
<span>Animal</span>
<span>Cat</span>
<span>Dog</span>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One');
.cp_anime15 {
font-family: 'Alfa Slab One', cursive;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: left;
}
.cp_anime15 p {
float: left;
color: #222222;
}
.cp_anime15 .scroller {
line-height: 1.5em;
float: left;
overflow: hidden;
height: 1.5em;
margin: 1em 0 0 7px;
}
.cp_anime15 .scroller span {
display: block;
color: #222222;
}
.cp_anime15 .scroller .inner {
-webkit-animation: anime15_scroll 5s infinite ease-out;
animation: anime15_scroll 5s infinite ease-out;
}
.cp_anime15 .scroller .inner::after {
position: absolute;
top: 1em;
left: 8em;
content: '65';
color: #b10d0d;
}
@-webkit-keyframes anime15_scroll {
15% { margin-top: 0px; }
30% { margin-top: 0px; }
45% { margin-top: -1.5em; }
60% { margin-top: -1.5em; }
75% { margin-top: -3em; }
90% { margin-top: -3em; }
100% { margin-top: 0px; }
}
@keyframes anime15_scroll {
15% { margin-top: 0px; }
30% { margin-top: 0px; }
45% { margin-top: -1.5em; }
60% { margin-top: -1.5em; }
75% { margin-top: -3em; }
90% { margin-top: -3em; }
100% { margin-top: 0px; }
}