Animación con .css no me funciona en Safari y IE

[ceaped]

Buenos días
Tengo la siguiente animación la cual me funciona bien en Chrome y Firefox:

Código CSS:

#cajon_1  {
    width: 111px;
    height: 480px;
    float: right;
 
    background-image: url(../images/cajon.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    
    /* Chrome, Safari, Opera */
    -webkit-animation: fadeOutUp cajon_1 fadeOutUp 4s;
    /* Firefox */
    animation: cajon_1 4s;  
    }
 

Código CSS:

@-webkit-keyframes cajon_1 {
            
from {
    width: 111px;
    height: 0px;    
    opacity: 0;
    
    /* Movimiento del cajon */
    -webkit-transform: translate1d(-4000px, 0, 0);
    transform: translate1d(-2000px, 0, 0);
    }
    
to {    
    width: 111px;
    height: 480px;
    opacity: 1;
    }
    
}
 

Código CSS:

@-moz-keyframes cajon_1 {
            
from {
    width: 111px;
    height: 0px;    
    opacity: 0;
    
    /* Movimiento del cajon*/
    -webkit-transform: translate1d(-4000px, 0, 0);
    transform: translate1d(-2000px, 0, 0);
    }
    
to {
    width: 111px;
    height: 480px;
    opacity: 1;
    
    }
    
}
 

Es un movimiento vertical de una cajón que aparece de arriba hacia abajo, pero como les digo no me funciona en Safari ni en IE.

¿Alguien me puede ayudar con esto?

Gracias por su ayuda

[AngelKrak]

por que animation es diferente al de -webkit? prueba con:

Código CSS:

animation: fadeOutUp cajon_1 fadeOutUp 4s;
 

[ceaped]

Hola AngelKrak
Nada no funciona en Safari ni en IE.

Gracias por tu ayuda

[ceaped]

Hice algunos cambios y ya me funciona en Safari pero en IE no:

Código CSS:

#cajon_1  {
    width: 111px;
    height: 480px;
    float: right;
 
    background-image: url(../images/cajon.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    
    -webkit-animation: cajon_1 4s;
    animation: cajon_1 4s;  
    }
 

Código CSS:

@-webkit-keyframes cajon_1 {
            
from {
    width: 111px;
    height: 0px;    
    opacity: 0;
    }
    
to {    
    width: 111px;
    height: 480px;
    opacity: 1;
    }
    
}
 

Código CSS:

@-moz-keyframes cajon_1 {            
from {
    width: 111px;
    height: 0px;    
    opacity: 0;
    }
    
to {
    width: 111px;
    height: 480px;
    opacity: 1;    
    }    
}
 

¿Cómo hago para que funciones en IE?

Gracias por su ayuda

[AngelKrak]

podrias subir tu codigo a codepen y mostrar una cap de tu error?

[ceaped]

Hola AngelKrak
Mira pongo un ejemplo pero acá si me funciona.
Es un asunto extraño:
Hago el .HTML y lo meto en una carpeta obvio que le doy "../" para localizar los .CSS, todo se visualiza pero no se ejecuta la animación.
He creado este ejemplo de varias formas y como te digo lo metro en una carpeta y no funciona la animación.


Ejemplo

Gracias por tu ayuda

[ceaped]

Hola AngelKrak
Ya se que es.
En mi .css estaba así:

Código CSS:

@media screen and (min-width: 745px) {
/* aca tenia la animacion*/
}
 

Adentro metía las animaciones, esto hacia que no me funcionara en IE.
¿Sabes por que?

¿Para qué es esta meta etiqueta?

Código HTML:

<meta http-equiv="X-UA-Compatible" content="IE=7,8,9" />
 

Gracias por tu ayuda

[AngelKrak]

yo te recomiendo que cambies esa etiqueta por HTML5(Hasta donde yo se, esa es de HTML4 o anterior)

Mas info:
http://librosweb.es/libro/xhtml/capi...metadatos.html