infinite slide with css and html

Asked

Viewed 241 times

0

My slide doesn’t want to be moving around endlessly:

<!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>

after 4 I want you to go back to 1 and continue...

html css3

1 answer

3


Your mistake is just that you wrote this property wrong

animation-interation-count: infinite;

Is not interation should be iteration

Thus: animation-iteration-count: infinite;

Important: As you can see in the Mozilla documentation the initial value for the iteration-count is of 1, so the animation just happens 1x, after as CSS does not recognize the property that is written wrong it stops after a repeat. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

See your code working with this bug fixed.

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>

Browser other questions tagged html css3

You are not signed in. Login or sign up in order to post.