Hola, tengo un problema con las animaciones. Llevo dos días dándole vueltas y no consigo averiguar que pasa. He buscado en los foros pero tampoco veo nada.
El caso es que cuando le pongo animation y @keyframes en el css me anula la declaración de estilos siguientes (que no tienen nada que ver con la animación)
En la página se trata de cuando aparezca, haya un cambio de color suave durante 4 seg.
la animación sale bien, pero la estructura de divs se me anula, y se me desformatea la pagina, (al anularse los estilos que le doy a los divs siguientes, los cuales ya no funcionan).
Aquí va el html.
Código CSS:
Ver original#main-cajonsastre {
background: #deaddd;
height: 82%;
overflow: hidden;
/*---animation----*/
animation:degraded-cajonsastre 4s;
-webkit-animation:degraded-cajonsastre 4s;
-moz-animation:degraded-cajonsastre 4s;
-o-animation:degraded-cajonsastre 4s;
}
@-webkit-keyframes degraded-cajonsastre
{
from {background:#d8ddd1;}
to {background:#DEADDD;}
}
@-moz-keyframes degraded-cajonsastre
{
from {background:#d8ddd1;}
to {background:#DEADDD;}
}
@-o-keyframes degraded-cajonsastre
{
from {background:#d8ddd1;}
to {background:#DEADDD;}
}
}
.format-box-cajonsastre {
color: #394A58;
height: 90%;
font-size: 0.96em;
margin: 1.5em auto;
width: 90%;
}
.format-box-cajonsastre ul {
list-style: square;
margin-left: 3em;
margin-bottom: 0.8em;
}
.format-box-cajonsastre h4 {
margin-bottom: 1em;
}
el id #main-cajon sastre sale bien, pero ya el de abajo, el .format-box-cajon sastre y todos los de atras ya no los pilla, es como si los anulara. Lo mismo pasa si cambio el #main-cajonsastre hacia otro lado, estilo que pille detrás, estilo que anula.
Espero haberme explicado bien. ¿alguien tiene idea?
saludos y gracias por leer.