User:Christharp/vector.css

.rw-wrapper{ position: relative; } .rw-sentence{ margin: 0; text-align: left; } rw-sentence span{ white-space: nowrap; font-weight: normal; } .rw-words{ display: inline; } .rw-words span{ position: absolute; opacity: 0; overflow: hidden; width: 100%; } .rw-words-1 span{ animation: rotateWordsFirst 24s linear infinite 0s; } .rw-words-2 span{ animation: rotateWordsSecond 24s linear infinite 0s; } .rw-words span:nth-child(2) { animation-delay: 4s;

} .rw-words span:nth-child(3) { animation-delay: 8s; } .rw-words span:nth-child(4) { animation-delay: 12s; } .rw-words span:nth-child(5) { animation-delay: 16s; } .rw-words span:nth-child(6) { animation-delay: 20s; } @keyframes rotateWordsFirst { 0% { opacity: 1; animation-timing-function: ease-in; height: 0px; } 8% { opacity: 1; height: 10px; } 19% { opacity: 1; height: 10px; } 25% { opacity: 0; height: 10px; } 100% { opacity: 0; } } @keyframes rotateWordsSecond { 0% { opacity: 1; animation-timing-function: ease-in; width: 0px; } 10% { opacity: 0.3; width: 0px; } 20% { opacity: 1; width: 100%; } 27% { opacity: 0; width: 100%; } 100% { opacity: 0; } }