Tema: Varias animaciones con .CSS
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/04/2014, 12:16
Avatar de ceaped
ceaped
 
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Pregunta Varias animaciones con .CSS
Buenas tardes
Estoy iniciando con animaciones en .css y tengo lo siguiente:

dialogo 1, se anima pero boton_avanza, no.

Código CSS: 
Ver original
  1. /* Animacion dialogo 1 */
  2. #dialogo_1{
  3.     width: 200px;
  4.     height: 180px;
  5.     background-image: url(../images/dialogo_1.png);
  6.     background-repeat: no-repeat;
  7.     position: absolute;
  8.     margin-left: 540px;
  9.     margin-top: 50px;
  10.     -webkit-animation: dialogo_1 4s;
  11.     animation: dialogo_1 4s;
  12.     }
  13.     
  14. #boton_avanzar{
  15.     width: 170px;
  16.     height: 172px;
  17.     background-image: url(../images/boton_avanzar.png);
  18.     background-repeat: no-repeat;
  19.     position: absolute;
  20.     margin-left: 300px;
  21.     margin-top: -350px;
  22.     -webkit-animation: boton_avanzar 4s;
  23.     animation: boton_avanzar 4s;
  24.     }
  25.  
  26.  
  27. @-webkit-keyframes dialogo_1{       
  28.     from {
  29.     width: 0px;
  30.     height: 0px;
  31.     background-image: url(../images/dialogo_1.png);
  32.     background-repeat:no-repeat;
  33.     margin-left : 540px;
  34.     margin-top: 50px;
  35.     opacity: 0;
  36.     }
  37.     
  38.     to {
  39.     background-image: url(../images/dialogo_1.png);
  40.     background-repeat:no-repeat;
  41.     margin-left: 540px;
  42.     margin-top: 50px;
  43.     opacity: 1;
  44.     }
  45.     
  46. }
  47.  
  48. @keyframes dialogo_1{
  49. from {
  50.     background-image: url(../images/dialogo_1.png);
  51.     background-repeat:no-repeat;
  52.     margin-left : 540px;
  53.     margin-top: 50px;
  54.     opacity: 0;
  55.     opacity: 0;
  56.     }
  57.     
  58. to {
  59.     background-image: url(../images/dialogo_1.png);
  60.     background-repeat:no-repeat;
  61.     margin-left: 540px;
  62.     margin-top: 50px;
  63.     opacity: 1;
  64.     }
  65. /* Fin Animacion dialogo 1 */
  66.  
  67.  
  68. /* Animacion boton avanzar */
  69. @-webkit-keyframes boton_avanzar{       
  70.     from {
  71.     background-image: url(../images/boton_avanzar.png);
  72.     background-repeat:no-repeat;
  73.     margin-left : 540px;
  74.     margin-top: 50px;
  75.     opacity: 0;
  76.     }
  77.     
  78.     to {
  79.     background-image: url(../images/boton_avanzar.png);
  80.     background-repeat:no-repeat;
  81.     margin-left: 540px;
  82.     margin-top: 50px;
  83.     opacity: 1;
  84.     }
  85.     
  86. }
  87.  
  88. @keyframes boton_avanzar{
  89. from {
  90.     background-image: url(../images/boton_avanzar.png);
  91.     background-repeat:no-repeat;
  92.     margin-left : 540px;
  93.     margin-top: 50px;
  94.     opacity: 0;
  95.     opacity: 0;
  96.     }
  97.     
  98. to {
  99.     background-image: url(../images/boton_avanzar.png);
  100.     background-repeat:no-repeat;
  101.     margin-left: 540px;
  102.     margin-top: 50px;
  103.     opacity: 1;
  104.     }
  105. /* Fin Animacion boton avanzar */


Código HTML: 
Ver original
  1. <section id="container">
  2.     <div id="dialogo_1"></div>    
  3.     <div id="boton_avanzar"></div>
  4.     </section>

Yo deseo que dialogo 1, aparezca primero y pasado unos segundos boton_avanza.

¿Qué tengo mal en mi .css?

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario