Como ter a animação css3 em ciclo para sempre
Quero ter todo o conjunto de animação para tocar para sempre. Quando a última foto desaparecer, quero que a primeira apareça outra vez. O que eu fiz (e eu não gosto) é definir a página para recarregar no final da última foto fade para fora. Há outra maneira de fazer isto usando css???
<html>
<head>
<style>
.content{
height: 400px !important;
/*margin: auto !important;*/
overflow: hidden !important;
width: 780px !important;
}
.imgholder{
height: 400px;
margin: auto;
width: 780px;
}
.photo1{
opacity: 0;
animation: fadeinphoto 7s 1;
-moz-animation: fadeinphoto 7s 1;
-webkit-animation: fadeinphoto 7s 1;
-o-animation: fadeinphoto 7s 1;
float: left;
position: relative;
top: 0px;
z-index: 1;
}
.photo2 {
opacity: 0;
animation: fadeinphoto 7s 5s 1;
-moz-animation: fadeinphoto 7s 5s 1;
-webkit-animation: fadeinphoto 7s 5s 1;
-o-animation: fadeinphoto 7s 5s 1;
float: left;
position: relative;
top: -400px;
z-index: 1;
}
.photo3 {
opacity:0;
animation: fadeinphoto 7s 10s 1;
-moz-animation: fadeinphoto 7s 10s 1;
-webkit-animation: fadeinphoto 7s 10s 1;
-o-animation: fadeinphoto 7s 10s 1;
float: left;
position: relative;
top: -800px;
z-index: 1;
}
.photo4 {
opacity: 0;
animation: fadeinphoto 7s 15s 1;
-moz-animation: fadeinphoto 7s 15s 1;
-webkit-animation: fadeinphoto 7s 15s 1;
-o-animation: fadeinphoto 7s 15s 1;
float: left;
position: relative;
top: -1200px;
z-index: 1;
}
.photo5 {
opacity: 0;
animation: fadeinphoto 7s 20s 1;
-moz-animation: fadeinphoto 7s 20s 1;
-webkit-animation: fadeinphoto 7s 20s 1;
-o-animation: fadeinphoto 7s 20s 1;
float: left;
position: relative;
top: -1600px;
z-index: 1;
}
/* Animation Keyframes*/
@keyframes fadeinphoto {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes fadeinphoto {
0% { opacity: 0; }
50% { opacity: 1; }
A100% { opacity: 0; }
}
@-webkit-keyframes fadeinphoto {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-o-keyframes fadeinphoto {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
</style>
<body>
<div class="content">
<div class="imgholder">
<img src="images/image1.jpg" width="780" height="400" class="photo1"/>
<img src="images/image2.JPG" width="780" height="400" class="photo2"/>
<img src="images/image3.JPG" width="780" height="400" class="photo3"/>
<img src="images/image4.jpg" width="780" height="400" class="photo4"/>
<img src="images/image5.jpg" width="780" height="400" class="photo5"/>
</div>
</div>
</body>
</head>
</html>
40
Author: Slipp D. Thompson, 2014-05-04
3 answers
Adicionar estes estilos
animation-iteration-count:infinite;
58
Author: Elad Shechter, 2014-05-04 16:28:21
Embora a solução do Elad funcione, você também pode fazê-lo em linha:
-moz-animation: fadeinphoto 7s 20s infinite;
-webkit-animation: fadeinphoto 7s 20s infinite;
-o-animation: fadeinphoto 7s 20s infinite;
animation: fadeinphoto 7s 20s infinite;
11
Author: Mark Eriksson, 2017-10-22 06:21:05
Deparei-me com o mesmo problema: uma página com muitas animações independentes, cada uma com seus próprios parâmetros, que deve ser repetida para sempre.
Fundindo esta pista com Esta outra pista encontrei uma solução fácil: após o fim de todas as suas animações, a embalagem div
é restaurada, forçando as animações a reiniciar.
Tudo que você tem que fazer é adicionar estas poucas linhas de Javascript, tão fácil que eles nem sequer precisam de qualquer biblioteca externa, na seção <head>
da sua Página:
<script>
setInterval(function(){
var container = document.getElementById('content');
var tmp = container.innerHTML;
container.innerHTML= tmp;
}, 35000 // length of the whole show in milliseconds
);
</script>
BTW, o encerramento </head>
no seu código é deslocado: deve ser antes do início <body>
.
1
Author: Marco Bernardini, 2017-05-23 12:18:25