[SOLUCIONADO] Animación me anula estilos

Iballa · #1 (**permalink**) 22/07/2013, 08:16

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.

pzin · #2 (**permalink**) 22/07/2013, 08:34

¿Puedes añadir HTML y si hiciera falta más CSS para reproducir el problema?

En principio no debería causar problemas una cosa con la otra.

Iballa · #3 (**permalink**) 22/07/2013, 12:46

Hola¡

Aquí va el html:

Código HTML:

Ver original<!DOCTYPE HTML>
<html lang="es" dir="ltr">
<head>
    <title></title>
    <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/estilos.css"/>
</head>
<body>
    <div id="wrapper">
      <section id="principal">
        <section id="main-cajonsastre">
            <div class="format-box-cajonsastre">
              <article class="pdf">
              <h4>ARTÍCULOS:</h4>
              <ul>
                 <li><a href="articulos/articulo1.pdf" target="_blank">articulo1</a></li>
                 <li><a href="articulos/articulo2.pdf" target="_blank">articulo2</a></li>
                 <li><a href="articulos/articulo3.pdf" target="_blank">articulo3</a></li>
                 <li><a href="articulos/articulo4.pdf" target="_blank">articulo4</a></li>
                 <li><a href="articulos/articulo5.pdf" target="_blank">articulo5</a></li>
                 <li><a href="articulos/articulo6.pdf" target="_blank">articulo6</a></li>
                 <li><a href="articulos/articulo7.pdf" target="_blank">articulo7</a></li>
              </ul>
            </article>
            <h4>AUDIOCUENTOS:</h4>
            <article  class="audio">
                    <div id="player4">This text will be replaced</div> 
                      <script type="text/javascript"> 
                        
                      </script>
             </article>
          </div>
         </section>
        </section>
  </div>
</body>
</html>

la div .format-box-cajonsastre antes me quedaba centrada, y se me fue a la izquierda cuando le puse el animation. Ahora ni siquiera me deja darle margin-left, o incluso no me deja darle background color. Es como si hubiera desaparecido esta caja...aunque su contenido sigue dentro. No se, a lo mejor es algo muy tonto pero no lo veo.

pzin · #4 (**permalink**) 22/07/2013, 12:55

El problema es que cierras algo que no has abierto, en el CSS:

Código CSS:

Ver original}

No me había fijado antes.

Como consejo, intenta siempre tener un código ordenado y manteniendo las mismas reglas. Es decir, si haces esto:

Código CSS:

Ver originalalgo {
  algo: algo;
}

Entonces pon tus @keyframes iguales:

Código CSS:

Ver original@keyframes algo {
  from {
    algo: algo;
  }
}

En lugar de:

Código CSS:

Ver original@keyframes algo
  {
  from { algo: algo; }
  }

Así tienes una visión mejor de lo que está de más.

Iballa · #5 (**permalink**) 23/07/2013, 06:41

Juaria que ese corchete lo quité y puse varias veces probando que no era ese el problema.
Recuerdo hacerlo, por eso terminé publicándolo aquí. Pensaba que era un problema más importante, de incompatibilidades o que se yo.

.. Tenía en la cabeza cuando veía ese corchete que eso seguro que no era.

Gracias por tu tiempo y por el consejo¡ no me pasará más. no habría vuelto a buscar por ahí seguro¡

Saludos

edito: lo que me deja con duda es y ...creo que era eso lo que me confundia, pensaba que @keyframes también tenia que estar en la misma caja que animation: o sea, que @keyframes los puedo poner donde me de la gana, sin estar dentro de ninguna caja...

pzin · #6 (**permalink**) 23/07/2013, 11:47

No, la regla de @keyframes la puedes poner donde quieras. Ya es una cuestión de cómo te organices.