Почему анимация ключевого кадра повторяется более одного раза? - PullRequest
Новая
       101

Почему анимация ключевого кадра повторяется более одного раза?

0 голосов
/ 10 апреля 2020 

.a.b{
				border: 2px solid red;
				animation-name: appear;
				animation-duration: 1s;
				animation-iteration-count: 1;
			}

			@keyframes appear{
			  from{opacity:0;
			      transform:rotateZ(20deg);
			        top:100;}
			  to{opacity:1;
			    top:0;
			    transform:rotate(0);}
			}

			@keyframes zoomer{
			  from{
			    opacity:0.5;
			  }
			  to{
			    opacity:1;
			  }
			}

			.a.b:hover{
				animation: zoomer 1s linear 1;
			}
<html>
	<head>
	</head>

	<body>
		<div>
			<h1 class="a b">hello world</h1>
		</div>
	</body>

</html>

В приведенном выше фрагменте кода почему анимация @keyframes повторяется, когда я использую hover? Количество итераций указано как 1.

Я предполагаю, что класс, связанный с тегом <h1>, изменяется при наведении курсора, а затем снова изменяется при удалении мыши. Но как мы это исправим?

1 Ответ

1 голос
/ 10 апреля 2020

Анимация запускается, потому что псевдокласс :hover переопределяет свойство <h1> animation. Когда псевдокласс удаляется, свойство animation снова «меняется», возвращаясь к своему первоначальному значению, которое запускает анимацию.

Есть несколько способов обойти это поведение. Если вы хотите, чтобы анимация <h1> загружалась, но никогда больше, рассмотрите возможность создания отдельного класса: 

.a.b.onload {
    animation-name: appear;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

Затем в Javascript удалите класс после ожидания 1 секунды для начальной анимации, чтобы фини sh: 

window.addEventListener("DOMContentLoaded", () => {
    setTimeout( () => {
        document.querySelector(".a.b").classList.remove("onload")
    }, 1000);
});
...