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