Las animaciones en una página web pueden atraer a más usuarios. Pregúntate esto: si vieras una página web que tiene bastante animación, ¿no te gustaría explorar más? Ahora, con las transiciones CSS puedes hacer que tu trabajo cobre vida con algunas animaciones geniales. Y, fíjate, estos deben hacerse bien. Exploremos el mundo de las transiciones CSS en el siguiente orden:
- ¿Por qué CSS Transitions?
- La propiedad de transición
- ¿Qué necesita especificar?
- La propiedad de la función Transition-timing-function
- La propiedad del retardo de transición
¿Por qué CSS Transitions?
Tomemos un ejemplo. Si tuviera que cambiar el color de un elemento de blanco a azul, este cambio es casi instantáneo. Para un efecto más animado, puede hacer que este cambio suceda gradualmente. Esto también parece bastante atractivo visualmente. Al habilitar las transiciones CSS, puede personalizar la forma en que ocurren los cambios. Puede definir cómo se producen los cambios en los elementos en intervalos de tiempo específicos que siguen una curva de aceleración.
Las transiciones CSS le permiten definir los cambios para elementos, los intervalos de tiempo específicos, la velocidad de la curva de aceleración y mucho más. Puede hacer todo esto sin usar Flash o JavaScript .
Para una mejor comprensión, puede consultar la imagen a continuación:
En la imagen de arriba, el elemento HTML cambiará de rojo a azul en cuestión de un segundo. También verá el color intermedio cuando se lleve a cabo la transición. Si no va a utilizar transiciones CSS, notará que el cambio de color de rojo a azul es instantáneo; no verá el color intermedio. Con las transiciones CSS, notará un efecto animado cuando los elementos HTML cambien del estado anterior al nuevo.
La propiedad de transición
Puede utilizar la propiedad de transición abreviada para controlar las transiciones CSS. El uso de esta abreviatura no solo es fácil, sino que también puede evitar los parámetros desincronizados que pueden ser bastante frustrantes de depurar en CSS.
La propiedad de transición especifica las propiedades CSS a las que desea el efecto de transición. Solo estas propiedades CSS están animadas.
Sintaxis:
transición:
Como principiante, es posible que tenga algunas dificultades para usar la taquigrafía. Si cree que usar la abreviatura es un poco complejo para usted en este momento, puede especificar las propiedades de transición por separado. Para un elemento HTML, puede especificar las propiedades de transición una por una como se muestra en el siguiente ejemplo:
div {ancho: 100px alto: 100px fondo: azul claro transición-propiedad: ancho transición-duración: 2s transición-función-tiempo: transición lineal-retardo: 1s} div: hover {ancho: 300px}Coloca el cursor sobre la caja
En el ejemplo anterior, hemos especificado las propiedades (propiedad de transición, duración de transición, función de tiempo de transición y retardo de transición) y sus valores por separado. En breve aprenderemos sobre estas propiedades de transición.
¿Qué necesita especificar?
Hay principalmente dos cosas que debe especificar para crear transiciones CSS: la propiedad CSS a la que desea agregar un efecto y la duración de ese efecto.Debe tener en cuenta una cosa: cuando no especifica el tiempo de duración, la transición tomará un valor predeterminado de 0 y no habrá ningún efecto.
Consideremos un ejemplo:
cómo clonar un objeto en java
El siguiente código define un efecto de transición de la propiedad de ancho por una duración de cinco segundos.
div {ancho: 100px alto: 100px fondo: transición azul: ancho 5s} div: hover {ancho: 600px}Mueva el cursor sobre el elemento div de arriba para ver el efecto de transición.
En el código anterior, verá que cuando pasa el cursor sobre el cuadro azul, el cuadro azul aumenta su ancho gradualmente durante un tiempo de cinco segundos. También notará que cuando quita el cursor del cuadro azul, el cuadro azul volverá a su tamaño original gradualmente (no instantáneamente). También puede cambiar los valores de ancho y duración para ver cómo afecta esta propiedad de transición al elemento HTML.
También puede agregar el efecto de transición a más de una propiedad. Puede hacerlo utilizando comas para separar las propiedades. Consideremos un ejemplo:
En el código siguiente, la propiedad de transición se especifica para ancho, alto y transformación.
div {padding: 15px width: 150px height: 100px background: green transición: ancho 2s, altura 2s, transform 2s} div: hover {width: 300px height: 200px transform: rotate (360deg)} Hola Mundo (Coloca el cursor sobre mí)
Con el ejemplo anterior, verá cómo se mueve el cuadro verde cuando se desplaza sobre el cuadro.
Hemos especificado solo la propiedad y la duración del tiempo. Veamos los otros parámetros con varios ejemplos.
La propiedad de la función Transition-timing-function
Esta propiedad define la curva de velocidad para el efecto de transición. Puede tomar los siguientes valores:
- Valor de facilidad: Este es el valor predeterminado donde el efecto es lento al principio, luego más rápido y termina lentamente.
- Valor lineal: Este efecto no varía la velocidad de la transición, mantiene la velocidad constante desde el principio hasta el final.
- Valor de facilidad de entrada: Este efecto comienza lentamente.
- Valor de facilidad de salida: Este efecto tiene un final lento.
- Valor de facilidad de entrada y salida: Este efecto tiene un comienzo lento y un final lento.
- Valor de Bézier cúbico (n, n, n, n): Puede especificar su propio conjunto de valores en la función cubic-bezier.
El siguiente código muestra los efectos de transición para valores lineales, de facilidad, facilidad de entrada, facilidad de salida y facilidad de entrada.
div {ancho: 100px alto: 100px fondo: rosa transición: ancho 2s} # div1 {función de tiempo de transición: lineal} # div2 {función de tiempo de transición: facilidad} # div3 {función de tiempo de transición: facilidad de entrada } # div4 {función de tiempo de transición: salida fácil} # div5 {función de tiempo de transición: salida fácil de entrada} div: hover {ancho: 300 px}Coloca el cursor sobre los elementos div a continuación
lineal
facilitar
facilidad en
Facilitarse
facilidad de entrada
La propiedad del retardo de transición
A veces, desea que se produzca una animación después de un tiempo determinado. La propiedad de retardo de transición le permite especificar el retardo de un efecto de transición. Puede especificar el retraso en segundos.
Tomemos un ejemplo para ver el retraso en el efecto de transición:
div {ancho: 100px alto: 100px fondo: amarillo transición: ancho 3s transición-retraso: 1s} div: hover {ancho: 300px}Coloca el cursor sobre el elemento div a continuación
java que son las variables de instancia
Nota: Puede observar que 1 segundo de retraso antes de que comience el efecto
En el código anterior, cuando pasa el cursor sobre el cuadro amarillo, notará (durante un segundo) que no hay ningún efecto. Después de esperar un segundo, notará el efecto.
Con esto, llegamos al final de este artículo de Transiciones CSS. Puede agregar animaciones a sus páginas web ahora. Pruebe estos ejemplos.
Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo convierte en un experto en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios del blog 'Transición CSS' y nos comunicaremos con usted.