Rotating Text

by Josh Pullen

HTML

<h1 id="text">Hi, I'm 
        <span>Josh.</span>
        <span>a programmer.</span>
        <span>a designer.</span>
        <span>a kid.</span>
</h1>

CSS

@-webkit-keyframes fade {
  0%, 35%, 100% { opacity: 0; }
  5%, 30% { opacity: 1; }
}
#text span {
    position:absolute;
    text-indent:10px;
    -webkit-animation: fade 6s infinite;
    opacity:0;
}
#text span:nth-of-type(2) {
    -webkit-animation-delay:1.5s;
}
#text span:nth-of-type(3) {
    -webkit-animation-delay:3s;
}
#text span:nth-of-type(4) {
    -webkit-animation-delay:4.5s;
}