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

Question

[Сергей Бурдужа]

Добрый день.
Есть анимация изображения, оно в течении 20 секунда плавно увеличивается.
Только после завершения анимации, изображение принимает начальные значения.

.home-page-intro {
	position: relative;
	height: 950px;
	overflow: hidden;
}

.home-page-intro__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background-size: cover;*/
	object-fit: cover;
	z-index: 1;
	animation: homeIntroImageAnimate 20s linear;
	animation-direction: alternate;
}
@keyframes homeIntroImageAnimate {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.2);
	}
}

А как остановить анимацию после ее завершения?

Заранее благодарен.

Answer 1

[alekseyHunter]

Как вариант, создать класс со значениями после анимации, в JS назначать этот класс после проигрыша анимации.

Comments

[Сергей Бурдужа]

Возможно, но я нашел простое решение.

animation-direction: normal;
	animation-fill-mode: forwards;

https://webref.ru/css/animation-fill-mode

Answer 2

[ivashjke]

animation: homeIntroImageAnimate 20s linear alternate forwards;

Comments

[Сергей Бурдужа]

Спасибо, так тоже можно, в одной строчке))