in

Transiciones CSS


Transiciones CSS

Las transiciones CSS le permiten cambiar los valores de propiedad sin problemas, durante un período determinado.

Pase el mouse sobre el elemento de abajo para ver un efecto de transición CSS:

En este capítulo aprenderá sobre las siguientes propiedades:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Soporte del navegador para transiciones

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Propiedad
transición 26,0 10.0 16,0 6.1 12,1
retardo de transición 26,0 10.0 16,0 6.1 12,1
duración de la transición 26,0 10.0 16,0 6.1 12,1
propiedad de transición 26,0 10.0 16,0 6.1 12,1
función de tiempo de transición 26,0 10.0 16,0 6.1 12,1

¿Cómo utilizar las transiciones CSS?

Para crear un efecto de transición, debe especificar dos cosas:

  • la propiedad CSS a la que desea agregar un efecto
  • la duración del efecto

Nota: Si no se especifica la parte de duración, la transición no tendrá ningún efecto, porque el valor predeterminado es 0.

El siguiente ejemplo muestra un elemento

rojo de 100px * 100px. El elemento
también ha especificado un efecto de transición para la propiedad de ancho, con una duración de 2 segundos:

Ejemplo

div {
ancho: 100px;
altura: 100px;

fondo: rojo;
transición: ancho 2s;
}

El efecto de transición comenzará cuando la propiedad CSS especificada (ancho) cambie de valor.

Ahora, especifiquemos un nuevo valor para la propiedad de ancho cuando un usuario pasa el mouse sobre el elemento

:

Tenga en cuenta que cuando el cursor se mueva fuera del elemento, volverá gradualmente a su estilo original.


Cambiar varios valores de propiedad

El siguiente ejemplo agrega un efecto de transición para la propiedad de ancho y alto, con una duración de 2 segundos para el ancho y 4 segundos para el alto:



Especificar la curva de velocidad de la transición

los transition-timing-function propiedad especifica la curva de velocidad del efecto de transición.

La propiedad de función de tiempo de transición puede tener los siguientes valores:

  • ease – especifica un efecto de transición con un inicio lento, luego rápido, luego termina lentamente (esto es predeterminado)
  • linear – especifica un efecto de transición con la misma velocidad de principio a fin
  • ease-in – especifica un efecto de transición con un inicio lento
  • ease-out – especifica un efecto de transición con un final lento
  • ease-in-out – especifica un efecto de transición con un inicio y un final lentos
  • cubic-bezier(n,n,n,n) – le permite definir sus propios valores en una función cubic-bezier

El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar:

Ejemplo

# 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: facilidad de entrada y salida;}

Inténtalo tú mismo »


Retrasa el efecto de transición

los transition-delay La propiedad especifica un retraso (en segundos) para el efecto de transición.

El siguiente ejemplo tiene un retraso de 1 segundo antes de comenzar:


Transición + Transformación

El siguiente ejemplo agrega un efecto de transición a la transformación:


Más ejemplos de transición

Las propiedades de transición de CSS se pueden especificar una por una, así:

Ejemplo

div {
propiedad de transición: ancho;

duración de la transición: 2 s;

función de temporización de transición: lineal;
retardo de transición: 1 s;
}

Inténtalo tú mismo »

o usando la propiedad taquigráfica transition:


¡Ponte a prueba con ejercicios!


Propiedades de transición CSS

La siguiente tabla enumera todas las propiedades de transición de CSS:

Propiedad Descripción
transición Una propiedad abreviada para establecer las cuatro propiedades de transición en una sola propiedad
retardo de transición Especifica un retraso (en segundos) para el efecto de transición.
duración de la transición Especifica cuántos segundos o milisegundos tarda en completarse un efecto de transición
propiedad de transición Especifica el nombre de la propiedad CSS para la que es el efecto de transición
función de tiempo de transición Especifica la curva de velocidad del efecto de transición.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Informes financieros de Hyperion

java training

Tutorial de Java | Aprende programación en Java