blog/animaciones-css-transitions
Por Yal Publicidad
Publicado el Vie 2 de Noviembre del 2018 a las 20:42
La sintaxis general de la propiedad transition es:
transition: <propiedad> <duracion> <funcion-tiempo> <retraso>;
EJEMPLO
a { text-decoration: none; color: #00F; /*Color azul */ } a:hover { color: #F00; /*Color Rojo */ } a { transition: color 0.8s linear 0.2s; }
Estos cuatro parámetros se pueden escribir también por separado:
EJEMPLO:
a { transition-property: text-decoration; transition-duration: 0.8s; transition-timing-function: linear; transition-delay: 0.2s; }
DESCRIPCIÓN:
Para crear un efecto de transición, debe especificar dos cosas:
Nota: Si la parte de la duración no se especifica, la transición no tendrá efecto, porque el valor predeterminado es 0.
El siguiente ejemplo muestra un elemento <div> de 100px * 100px. El elemento <div> también ha especificado un efecto de transición para la propiedad de ancho, con una duración de 2 segundos:
EJEMPLO
div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s; /* Safari */ transition: width 2s; }
El efecto de transición se iniciará cuando la propiedad CSS especificada (width) cambie de valor.
Ahora, especifiquemos un nuevo valor para la propiedad de ancho cuando un usuario se mueve sobre el elemento <div>:
EJEMPLO
div:hover { width: 300px; }
Tenga en cuenta que cuando el cursor salga del elemento, cambiará gradualmente a su estilo original.
El siguiente ejemplo agrega un efecto de transición para las propiedades de ancho y alto, con una duración de 2 segundos para el ancho y 4 segundos para el alto:
div { -webkit-transition: width 2s, height 4s; /* Safari */ transition: width 2s, height 4s; }
La propiedad transition-timing-function especifica la curva de velocidad del efecto de transición.
EJEMPLO:
#div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;}
La propiedad de retardo de transición especifica un retraso (en segundos) para el efecto de transición.
El siguiente ejemplo tiene un retraso de 1 segundo antes de comenzar:
div { -webkit-transition-delay: 1s; /* Safari */ transition-delay: 1s; }
Transición + Transformación
El siguiente ejemplo también agrega una transformación al efecto de transición:
div {
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
Las propiedades de transición de CSS se pueden especificar una por una, de esta manera:
div { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; }
o mediante el uso de la transición de propiedad de taquigrafía:
div { transition: width 2s linear 1s; }