Originariamente inviata da
KillerWorm
Ciao.
Giusto per chiarire: il comando
trasform non esiste.
Forse volevi scrivere
transform. Ma anche in quel caso la proprietà
transform non ha niente a che fare con
animation.
Forse intendevi
transition?
In questo caso le due cose potrebbero avere delle analogie ma è comunque meglio parlare più propriamente di
animation.
Venendo alla tua richiesta, in linea di massima puoi risolvere impostando inizialmente
opacity:0 alle immagini e rivedendo la sequenza di
keyframes in modo che anche qui
opacity sia inizialmente 0.
Inoltre il tutto può essere meglio ottimizzato eliminando un po' di codice ridondante.
Ti posto un esempio concreto. Non mi dilungo su ulteriori spiegazioni ma, se dovessero servire, chiedi pure.
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style>
@-webkit-keyframes cf4FadeInOut {
0% {opacity:0}
8% {opacity:1}
25% {opacity:1}
33% {opacity:0}
}
@-moz-keyframes cf4FadeInOut {
0% {opacity:0}
8% {opacity:1}
25% {opacity:1}
33% {opacity:0}
}
@-o-keyframes cf4FadeInOut {
0% {opacity:0}
8% {opacity:1}
25% {opacity:1}
33% {opacity:0}
}
@keyframes cf4FadeInOut {
0% {opacity:0}
8% {opacity:1}
25% {opacity:1}
33% {opacity:0}
}
.logo {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
.logo img {
position:absolute;
left:0;
opacity:0;
-webkit-animation: cf4FadeInOut 16s ease-in-out infinite;
-moz-animation: cf4FadeInOut 16s ease-in-out infinite;
-o-animation: cf4FadeInOut 16s ease-in-out infinite;
animation: cf4FadeInOut 16s ease-in-out infinite;
}
.logo img:nth-of-type(1) {
-webkit-animation-delay: -1.3s;
-moz-animation-delay: -1.3s;
-o-animation-delay: -1.3s;
animation-delay: -1.3s;
}
.logo img:nth-of-type(2) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
-o-animation-delay: 2.7s;
animation-delay: 2.7s;
}
.logo img:nth-of-type(3) {
-webkit-animation-delay: 6.7s;
-moz-animation-delay: 6.7s;
-o-animation-delay: 6.7s;
animation-delay: 6.7s;
}
.logo img:nth-of-type(4) {
-webkit-animation-delay: 10.7s;
-moz-animation-delay: 10.7s;
-o-animation-delay: 10.7s;
animation-delay: 10.7s;
}
</style>
</head>
<body>
<div class="logo" >
<img src="immagine1.png" alt="" >
<img src="immagine2.png" alt="" >
<img src="immagine3.png" alt="" >
<img src="immagine4.png" alt="" >
</div>
</body>
</html>
Rispondi quotando