I'm attempting to create a CSS animation that involves fading out one word, replacing it with another word, and then fading in the new word. I'm having trouble getting it to work correctly. Here is my code:
HTML
<span class="words"></span>
CSS
.words:before {
content: "one";
animation-name: replacement;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes replacement {
0% {
opacity: 0;
}
100% {
opacity: 1;
content: "two";
}
}