0

Meu slide nao quer ficar transitando infinitamente:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<style>
body {
background:#000000;
}
*{
 margin: 0px;
 padding: 0px;
}
.galeria {
margin: 200px auto;
width: 480px;
height: 270px;
position: relative;
overflow: hidden;
}
.foto {
position: absolute;
opacity: 0;
animation-name: animacao;
animation-duration: 20s;
animation-interation-count: infinite;
}

@keyframes animacao {

25%{
opacity: 1;
transform:scale(1.1,1.1);
}

50% {
opacity: 0;
}
}
.foto:nth-child(1) {

}
.foto:nth-child(2) {
animation-delay: 5s;
}
.foto:nth-child(3) {
animation-delay: 10s;

}
.foto:nth-child(4) {
animation-delay: 15s;

}

</style>
</head>
<body>
<section class="galeria">
<img class="foto" src="https://i.imgur.com/Zp7hKLk.jpg"/>
<img class="foto" src="https://i.imgur.com/jh0fzrj.jpg"/>
<img class="foto" src="https://i.imgur.com/FNx6QlA.jpg"/>
<img class="foto" src="https://i.imgur.com/qliy99i.jpg"/>
</section>

</body>
</html>

depois do 4 quero que volte pro 1 e continue...

1 Resposta 1

3

Seu erro é apenas que vc escreveu essa propriedade errada

animation-interation-count: infinite;

Não é interation deveria ser iteration

Dessa forma: animation-iteration-count: infinite;

Importante: Como vc pode ver na documentação da Mozilla o valor inicial para o iteration-count é de 1, por isso a animação só acontece 1x, depois como o CSS não reconhece a propriedade que está escrito errado ela para depois de uma repetição. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

Veja seu código funcionando com esse erro corrigido.

body {
	background: #000000;
}

* {
	margin: 0px;
	padding: 0px;
}

.galeria {
	margin: 200px auto;
	width: 480px;
	height: 270px;
	position: relative;
	overflow: hidden;
}

.foto {
	position: absolute;
	opacity: 0;
	animation-name: animacao;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}

@keyframes animacao {

	25% {
		opacity: 1;
		transform: scale(1.1, 1.1);
	}

	50% {
		opacity: 0;
	}
}

.foto:nth-child(1) {}

.foto:nth-child(2) {
	animation-delay: 5s;
}

.foto:nth-child(3) {
	animation-delay: 10s;

}

.foto:nth-child(4) {
	animation-delay: 15s;

}
<section class="galeria">
	<img class="foto" src="https://i.imgur.com/Zp7hKLk.jpg" />
	<img class="foto" src="https://i.imgur.com/jh0fzrj.jpg" />
	<img class="foto" src="https://i.imgur.com/FNx6QlA.jpg" />
	<img class="foto" src="https://i.imgur.com/qliy99i.jpg" />
</section>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .