Fabuloso CSS3. Las animaciones, antes reservadas a jаvascript y otras tecnologías, ahora son posibles con CSS. Existe la propiedad animation, más específica para animaciones, pero en este post voy a hablar de transition. No es que sea la panacea pero se pueden conseguir animaciones interesantes con unas pocas líneas.Sintaxis
La sintaxis general de la propiedad transition es:
Ver demostración...
Estos cuatro parámetros se pueden escribir también por separado:
transition-timing-function y transition-delay se pueden omitir. En este caso se tomará el valor ease y 0 respectivamente. Por ejemplo:Compatibilidad navegadores
IE soporta la propiedad transition desde la versión 10; olvídate de IE 9 y versiones anteriores. En los demás navegadores es soportada desde versiones tempranas si se añaden los prefijos propios de cada uno. La versión de transition con mayor compatibilidad sería, por ejemplo:
Resumiendo, para aplicar transition hay que seguir estos pasos:
En el siguiente ejemplo se puede ver como, al poner el ratón encima de cada div, hay una transición de las propiedades width y background con la misma duración pero con diferente curva de velocidad: Ver demostración...
Ejemplo: cambio de tamaño y de forma: Ver demostración...
Ejemplo Efecto fade-in: Ver demostración...
La sintaxis general de la propiedad transition es:
transition: <propiedad> <duracion> <funcion-tiempo> <retraso>;
Por ejemplo:a {
text-decoration: none;
color: blue;
}
a:hover {
color: red;
}
a {
transition: color 0.8s linear 0.2s;
}
Lo que hemos hecho es aplicar la regla color general al elemento a y hemos cambiado esta regla cuándo se pasa el ratón por encima (hover). Con la regla transition hemos definido como queremos que se haga ese cambio del color. Este ejemplo (ultra-básico) tendría esta pinta:Ver demostración...
Sintaxis alternativa
Estos cuatro parámetros se pueden escribir también por separado:
a {
transition-property: text-decoration;
transition-duration: 0.8s;
transition-timing-function: linear;
transition-delay: 0.2s;
}
Cada parámetro es:- transition-poperty: propiedad a la que se le va a aplicar el efecto de transición. Cualquier propiedad CSS es válida: width, height, color, border, etc.
- transition-duration: duración del efecto. Puede ser en segundos (s) o milisegundos (ms).
- trasition-timing-function: define la curva de velocidad a la que se produce el efecto. Puede ser:
- ease: este es el valor por defecto. Tiene un comienzo lento, luego rápido y termina de nuevo lentamente. Es equivalente a cubic-bezier(0.25,0.1,0.25,1).
- linear: la misma velocidad durante toda la duración de la transición. Equivalente a cubic-bezier(0,0,1,1).
- ease-in: efecto de transición con comienzo lento. Equivalente a cubic-bezier(0.42,0,1,1).
- ease-out: efecto de transición con comienzo rápido y final lento. Equivalente a cubic-bezier(0,0,0.58,1).
- ease-in-out: efecto de transición con comienzo y final lento; más rápido en medio. Equivalente a cubic-bezier(0.42,0,0.58,1).
- cubic-bezier(n,n,n,n): define tus propios valores para la curva de Bezier. Cada valor es entre 0 y 1.
- initial: establece esta propiedad a su valor por defecto.
- inherit: hereda esta propiedad del elemento padre.
- transition-delay: retraso en el comienzo de la transición. Puede ser en segundos (s) o milisegundos (ms).
transition-timing-function y transition-delay se pueden omitir. En este caso se tomará el valor ease y 0 respectivamente. Por ejemplo:
a {
transition: text-decoration 0.8s;
}
Además, se pueden especificar varias transiciones a la vez separando el grupo de parámetros por una coma:a {
transition: text-decoration 0.8s, color 1s, font-weight 0.5s ease-out 0.1s;
}
Y también se puede aplicar a todas las propiedades CSS del elemento (en el siguiente ejemplo el cambio de cualquier propiedad de estilo del elemento a tendría una transición de 0.8s):a {
transition: all 0.8s;
}
Compatibilidad navegadores
IE soporta la propiedad transition desde la versión 10; olvídate de IE 9 y versiones anteriores. En los demás navegadores es soportada desde versiones tempranas si se añaden los prefijos propios de cada uno. La versión de transition con mayor compatibilidad sería, por ejemplo:
.ejemplo {
/*Chrome, Safari*/
-webkit-transition: width 8ms linear 1s;
/*Firefox*/
-moz-transition: width 8ms linear 1s;
/*Opera*/
-o-transition: width 8ms linear 1s;
/*Standard*/
transition: width 8ms linear 1s;
}
Aplicación
Resumiendo, para aplicar transition hay que seguir estos pasos:
- Definir el estilo básico de un elemento
- Definir un estilo diferente para algunas acciones, generalmente :hover, :focus y similares.
- Definir la regla transition como se ha explicado anteriormente.
Ejemplos
Ejemplo: cambio de tamaño y de forma: Ver demostración...
Ejemplo Efecto fade-in: Ver demostración...
Comentarios