Как убрать и заменить слово анимацией CSS?

Question

Я пытаюсь создать анимацию CSS, где слово исчезает, его заменяют другие слова, и появляется новое слово. Кажется, не могу найти правильный способ сделать это. Вот мой код:

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";
    }
}

https://jsfiddle.net/fp2h6q4L/

Answer 1

Попробуйте это CSS

.words:before {

  opacity:0;
	content: "one";
	animation-name: replacement;
	animation-duration: 4s;
  	animation-timing-function: ease-out;
  	animation-iteration-count: infinite;
    animation-direction: absolute;
}

@keyframes replacement {
	0%{
		opacity: 1;
	}
  50%{
    opacity:0;
  }
  100%{
    content:"two";
    opacity:1;
  }


}

<span class="words"></span>

Answer 2

Если вы хотите сделать это с чистым CSS, вам, вероятно, потребуется определить вторую анимацию для изменения текста, а затем установить задержку для этой анимации, которая будет запускаться при непрозрачности 0, чтобы резкое изменение было скрыто .