Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Animación con .css no me funciona en Safari y IE en el foro de CSS en Foros del Web. Buenos días Tengo la siguiente animación la cual me funciona bien en Chrome y Firefox: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original #cajon_1   {   ...
  #1 (permalink)  
Antiguo 13/10/2015, 06:53
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.151
Antigüedad: 15 años, 10 meses
Puntos: 9
Pregunta Animación con .css no me funciona en Safari y IE

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

Código CSS:
Ver original
  1. #cajon_1  {
  2.     width: 111px;
  3.     height: 480px;
  4.     float: right;
  5.  
  6.     background-image: url(../images/cajon.png);
  7.     background-position: 0 0;
  8.     background-repeat: no-repeat;
  9.    
  10.     /* Chrome, Safari, Opera */
  11.     -webkit-animation: fadeOutUp cajon_1 fadeOutUp 4s;
  12.     /* Firefox */
  13.     animation: cajon_1 4s; 
  14.     }

Código CSS:
Ver original
  1. @-webkit-keyframes cajon_1 {
  2.            
  3. from {
  4.     width: 111px;
  5.     height: 0px;   
  6.     opacity: 0;
  7.    
  8.     /* Movimiento del cajon */
  9.     -webkit-transform: translate1d(-4000px, 0, 0);
  10.     transform: translate1d(-2000px, 0, 0);
  11.     }
  12.    
  13. to {   
  14.     width: 111px;
  15.     height: 480px;
  16.     opacity: 1;
  17.     }
  18.    
  19. }


Código CSS:
Ver original
  1. @-moz-keyframes cajon_1 {
  2.            
  3. from {
  4.     width: 111px;
  5.     height: 0px;   
  6.     opacity: 0;
  7.    
  8.     /* Movimiento del cajon*/
  9.     -webkit-transform: translate1d(-4000px, 0, 0);
  10.     transform: translate1d(-2000px, 0, 0);
  11.     }
  12.    
  13. to {
  14.     width: 111px;
  15.     height: 480px;
  16.     opacity: 1;
  17.    
  18.     }
  19.    
  20. }

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
__________________
Diseñador Gráfico publicitario
  #2 (permalink)  
Antiguo 13/10/2015, 11:02
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 5 años
Puntos: 91
Respuesta: Animación con .css no me funciona en Safari y IE

por que animation es diferente al de -webkit? prueba con:
Código CSS:
Ver original
  1. animation: fadeOutUp cajon_1 fadeOutUp 4s;
  #3 (permalink)  
Antiguo 13/10/2015, 11:28
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.151
Antigüedad: 15 años, 10 meses
Puntos: 9
Respuesta: Animación con .css no me funciona en Safari y IE

Hola AngelKrak
Nada no funciona en Safari ni en IE.

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #4 (permalink)  
Antiguo 13/10/2015, 12:23
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.151
Antigüedad: 15 años, 10 meses
Puntos: 9
Respuesta: Animación con .css no me funciona en Safari y IE

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

Código CSS:
Ver original
  1. #cajon_1  {
  2.     width: 111px;
  3.     height: 480px;
  4.     float: right;
  5.  
  6.     background-image: url(../images/cajon.png);
  7.     background-position: 0 0;
  8.     background-repeat: no-repeat;
  9.    
  10.     -webkit-animation: cajon_1 4s;
  11.     animation: cajon_1 4s;  
  12.     }

Código CSS:
Ver original
  1. @-webkit-keyframes cajon_1 {
  2.            
  3. from {
  4.     width: 111px;
  5.     height: 0px;    
  6.     opacity: 0;
  7.     }
  8.    
  9. to {    
  10.     width: 111px;
  11.     height: 480px;
  12.     opacity: 1;
  13.     }
  14.    
  15. }

Código CSS:
Ver original
  1. @-moz-keyframes cajon_1 {            
  2. from {
  3.     width: 111px;
  4.     height: 0px;    
  5.     opacity: 0;
  6.     }
  7.    
  8. to {
  9.     width: 111px;
  10.     height: 480px;
  11.     opacity: 1;    
  12.     }    
  13. }

¿Cómo hago para que funciones en IE?

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #5 (permalink)  
Antiguo 13/10/2015, 13:52
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 5 años
Puntos: 91
Respuesta: Animación con .css no me funciona en Safari y IE

podrias subir tu codigo a codepen y mostrar una cap de tu error?
  #6 (permalink)  
Antiguo 14/10/2015, 08:21
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.151
Antigüedad: 15 años, 10 meses
Puntos: 9
Respuesta: Animación con .css no me funciona en Safari y IE

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
__________________
Diseñador Gráfico publicitario
  #7 (permalink)  
Antiguo 14/10/2015, 09:11
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.151
Antigüedad: 15 años, 10 meses
Puntos: 9
Respuesta: Animación con .css no me funciona en Safari y IE

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

Código CSS:
Ver original
  1. @media screen and (min-width: 745px) {
  2. /* aca tenia la animacion*/
  3. }
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:
Ver original
  1. <meta http-equiv="X-UA-Compatible" content="IE=7,8,9" />

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

Última edición por ceaped; 14/10/2015 a las 09:21 Razón: Corregir texto
  #8 (permalink)  
Antiguo 14/10/2015, 11:11
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 5 años
Puntos: 91
Respuesta: Animación con .css no me funciona en Safari y IE

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

Etiquetas: background, chrome, float, safari, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:37.