Text animation - pure CSS

by Jens Kühn

HTML

<p>I'm a</p>
<b>
  <span1>
    web developer<br /> 
    css cowboy<br />
    self-facilitating media node<br />
    box inside a box<br />
    part of the problem
    </span1>
</b>

CSS

body {
  padding: 2em 5em;
  font: normal 40px/50px Arial, sans-serif;
  color: #999;
}
p {
  height: 50px;
  float: left;
  margin-right: 0.3em;
}
b {
  float: left;
  overflow: hidden;
  position: relative;
  height: 50px;
}
span1 {
 display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
-webkit-animation: move 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
}

@keyframes move {
0%  { top: 0px; }
15% { top: 0px; }
20% { top: -50px; }
35% { top: -50px; }
40% { top: -100px; }
55% { top: -100px; }
60% { top: -150px; }
75% { top: -150px; }
80% { top: -200px; }
95% { top: -200px; }
}