Animación aninada
Publicado por Marta (32 intervenciones) el 30/03/2021 21:17:32
Buenas, me falla la siguiente animación.
Dada una acción, pretendo darle la vuelta a una celda, visualizar una imagen, y volver al estado inicial.
Para ello, el código es el siguiente:
act1Ok: gira 90º la imagen original, queda la celda en blanco
act1Be: asigno una imagen de fondo de la celda. Esta animación es la que no funciona
act1Ko: gira los 90º hasta aparecer de nuevo la imagen inicial
Dada una acción, pretendo darle la vuelta a una celda, visualizar una imagen, y volver al estado inicial.
Para ello, el código es el siguiente:
1
2
3
4
5
<table id="act1Taula">
<tr>
<td id="act1TaulaColFotosAnimatOk"><img class="act1Fotos" id="act1Foto1"></td>
<td class="act1TaulaColFotos"><img class="act1Fotos" id="act1Foto2"></td>
.............
act1Ok: gira 90º la imagen original, queda la celda en blanco
act1Be: asigno una imagen de fondo de la celda. Esta animación es la que no funciona
act1Ko: gira los 90º hasta aparecer de nuevo la imagen inicial
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.act1TaulaColFotosAnimatOk {
animation-name: act1Ok, act1Be, act1Ko;
animation-duration: 6s, 6s, 6s;
animation-delay: 0s, 6s, 12s;
}@keyframes act1Ok {0% {transform:rotateY(0deg);}
100% {transform:rotateY(90deg);}
}@keyframes act1Ko {0% {transform:rotateY(90deg);}
100% {transform:rotateY(0deg);}
}@keyframes act1Be {0% {background:url(../imatges/ok.png)}
100% {background:url(../imatges/ok.png)}
}Valora esta pregunta
0