Cercando di visualizzare tre elementi uno dopo l'altro nella pagina, ma succede il seguente.
Appaiono tutti e tre gli elementi, il primo elementonon fa nulla (sembra che abbia già attraversato l'animazione) Quindi il secondo elemento scompare e poi inizia l'animazione e poi la stessa cosa per il terzo elemento.
Ecco il mio codice, cosa mi manca qui:
@-webkit-keyframes reset {
0% {opacity: 0;}
100% {opacity: 0;}
}
@-webkit-keyframes fade-in {
0% { opacity: 0; -webkit-transform: scale(.1);}
85% {opacity: 1; -webkit-transform: scale(1.05);}
100% {-webkit-transform: scale(1);}
}
.fade-in {
-webkit-animation-name: reset, fade-in;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
}
.fade-in.one {-webkit-animation-delay: 0, .5;}
.fade-in.two {-webkit-animation-delay: 0, 1.5s;}
.fade-in.three {-webkit-animation-delay: 0, 2.5s;}
Grazie in anticipo
risposte:
2 per risposta № 1Il problema principale con il tuo codice è che ti manca l'unità di tempo ...
.fade-in.one {-webkit-animation-delay: 0, .5s;}
Durante il test del tuo codice mi sono permesso di farlosemplificalo un po '. Non è necessario disporre di due animazioni separate, esiste una proprietà poco conosciuta denominata -webkit-animation-fill-mode che consente all'animazione di rimanere nell'ultimo stato. Ecco la mia versione refactored:
@-webkit-keyframes fade-in {
0% { opacity: 0; -webkit-transform: scale(.1);}
85% {opacity: 1; -webkit-transform: scale(1.05);}
100% {-webkit-transform: scale(1); opacity: 1;}
}
.fade-in {
-webkit-animation: fade-in .5s ease-in;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
opacity: 0;
}
.fade-in.one {-webkit-animation-delay: .5s;}
.fade-in.two {-webkit-animation-delay: 1.5s;}
.fade-in.three {-webkit-animation-delay: 2.5s;}
Puoi verificarlo qui: