Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema con Transition

Estas en el tema de Problema con Transition en el foro de CSS en Foros del Web. Estimados hice un pequeño efecto de animación en una barra de menú de un sitio (simplemente al pasar con el mouse sobre los links, estos ...
  #1 (permalink)  
Antiguo 05/01/2015, 15:31
 
Fecha de Ingreso: mayo-2003
Mensajes: 523
Antigüedad: 20 años, 10 meses
Puntos: 6
Problema con Transition

Estimados hice un pequeño efecto de animación en una barra de menú de un sitio (simplemente al pasar con el mouse sobre los links, estos se agrandan levemente).
El problema es que el efecto no me funciona en el navegador Safari (si en Chrome, Firefox e IE).

Les dejo el código a ver si me pueden dar una mano:

#menu a {
display:block;
color:#CCCCCC;
text-decoration:none;
font-size:18px;
transition: transform .15s linear;
-webkit-transition: -webkit-transform .15s linear;
-moz-transition: -moz-transform .15s linear;
-o-transition: -o-transform .15s linear;
}
#menu a:hover {
display:block;
transition: transform .15s linear;
-webkit-transition: -webkit-transform .15s linear;
transform: scale(1.25);*
-webkit-transform: scale(1.25);*
-moz-transition: -moz-transform .15s linear;
-moz-transform: scale(1.25);*
}
  #2 (permalink)  
Antiguo 07/01/2015, 09:23
 
Fecha de Ingreso: agosto-2013
Ubicación: A Coruña
Mensajes: 54
Antigüedad: 10 años, 6 meses
Puntos: 14
Respuesta: Problema con Transition

Hola. Puedes corroborar cual es la versión del Safari?. Si no me equivoco, transition solo es soportado a partir de la versión 7.1 a la 8 (De Yosmite).
Si quieres y para hacer más ligero el archivo css,prescinde de los transitions en el :hover ya que los lee igual y asi la transiciónde retorno no es brusca.
Un saludo y espero haberte sido de ayuda

EDITO: Me equivoqué, transition si que es soportado para versiones anteriores. Yo probaria a lo que te dije antes, quitar los transitions del :hover y mirar.
Un saludo de nuevo

Última edición por martinmiranda90; 07/01/2015 a las 09:33 Razón: Corrección de información
  #3 (permalink)  
Antiguo 07/01/2015, 10:16
 
Fecha de Ingreso: mayo-2003
Mensajes: 523
Antigüedad: 20 años, 10 meses
Puntos: 6
Respuesta: Problema con Transition

Gracias por la respuesta!
Dejé el código así:

#menu a {
display:block;
color:#CCCCCC;
text-decoration:none;
font-size:18px;
transition: transform 0.15s linear;
-webkit-transition: -webkit-transform 0.15s linear;
}
#menu a:hover {
display:block;
transform: scale(1.25);
-webkit-transform: scale(1.25);*
}

Y ahora funciona en Safari. También probé en Opera y hasta en el navegador que trae por defecto mi celular Samsung Galaxy y funciona perfecto!

Muchas gracias por la ayuda.
  #4 (permalink)  
Antiguo 07/01/2015, 10:49
 
Fecha de Ingreso: agosto-2013
Ubicación: A Coruña
Mensajes: 54
Antigüedad: 10 años, 6 meses
Puntos: 14
Respuesta: Problema con Transition

Un placer poder haberte ayudado

Etiquetas: color, hover
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 23:32.