infinite slide with css and html

Question

infinite slide with css and html

Navigation

#1 by (3 votes)

0

My slide does not want to go through 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"/><imgclass="foto" src="https://i.imgur.com/jh0fzrj.jpg"/><imgclass="foto" src="https://i.imgur.com/FNx6QlA.jpg"/><imgclass="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

asked by anonymous 28.12.2018 / 01:05

1 answer

Select with two conditions Create input with fixed value

score 3 · Accepted Answer

Your mistake is just that you wrote this wrong property

animation-interation-count: infinite;

Is not interation should be iteration

This way: animation-iteration-count: infinite;

Important: As you can see in the Mozilla documentation the initial value for iteration-count is 1 , so the animation only happens 1x , then as CSS does not recognize the property that is spelled wrong it for after a repeat. link

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"/><imgclass="foto" src="https://i.imgur.com/jh0fzrj.jpg"/><imgclass="foto" src="https://i.imgur.com/FNx6QlA.jpg"/><imgclass="foto" src="https://i.imgur.com/qliy99i.jpg" />
</section>