Как сделать анимацию поочередного появления?

Question

[nen0y]

<span>1</span><span>2</span><span>3</span>

Как используя keyframes сделать что бы изначально был видимый первый элемент, после этого он исчезал, появлялся второй, после этого он исчезал, появлялся третий и после этого он исчезал, появлялся первый?

Comments

[Ankhena]

Ну вот точно также Как сделать анимацию текста?

Answer 1

[Дмитрий Марков]

Сделать 3 одинаковых анимации, просто в разный тайминг отображать элементы

@keyframes animation1 {
	0% {
		opacity: 0;
	}
	33% {
		opacity: 1;
	}
	66% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@keyframes animation2 {
	0% {
		opacity: 0;
	}
	33% {
		opacity: 0;
	}
	66% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes animation3 {
	0% {
		opacity: 0;
	}
	33% {
		opacity: 0;
	}
	66% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

Comments

[Ankhena]

Проще одну анимацию с разными задержками делать