El mejor tutorial de transiciones CSS3 en 2024. En este tutorial podrás aprender transiciones CSS3,Soporte para el navegador,¿Cómo funciona?,Ejemplos,Ejemplos,Número de cambios,Ejemplos,Propiedades de transición,Ejemplos,Ejemplos,
CSS3, tenemos que añadir un efecto que se puede convertir de un estilo a otro tiempo, sin el uso de la animación Flash o JavaScript. Ratón sobre los siguientes elementos:
Ratón sobre los siguientes elementos:
Las cifras de la tabla representan el primer navegador compatible con el número de versión de la propiedad.
Inmediatamente después de la -webkit- digital, -MS- o hace -moz- en apoyo del prefijo atribuyen primer número de la versión del navegador.
属性 | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transición CSS 3 es un elemento poco a poco cambia de un estilo a otro efecto.
Para lograr esto, dos cosas deben ser definidos:
atributo width aplica el efecto de transición, duración de 2 segundos:
Nota: Si no seespecifica un límite de tiempo, la transición no tendrá ningún efecto, ya que el valor por defecto es 0.
El efecto va a cambiar el valor de los cambios especificados de propiedad CSS. Un cambio típico propiedad CSS es el ratón sobre un elemento de usuario:
Disposiciones cuando la suspensión puntero del ratón (: hover) para el elemento <div> cuando:
Nota: Cuando el cursor del ratón en el elemento, cambia gradualmente su estilo original
Para agregar más de un efecto del cambio de estilo, añadir atributos separados por comas:
efectos anchura, altura, y de transición Añadido:
La siguiente tabla muestra todas las propiedades de transición:
propiedad | descripción | CSS |
---|---|---|
transición | propiedad abreviada para establecer las cuatro propiedades de transición en una propiedad. | 3 |
transición de la propiedad | El nombre de la transición propiedad CSS se aplican disposiciones. | 3 |
transición de duración | Para definir el tiempo de efecto de transición gastado. El valor predeterminado es 0. | 3 |
transición de sincronización funciones | curva de tiempo del efecto de transición predeterminada. El valor por defecto es "aliviar". | 3 |
transición de retardo | Disposiciones cuándo comenzar el efecto de transición. El valor predeterminado es 0. | 3 |
Los dos ejemplos siguientes establecen todos los atributos de la transición:
Utilizar todas las propiedades de transición en un ejemplo:
Y ejemplos de los mismos efectos de transición anteriores, pero utiliza las propiedades de transición de la taquigrafía: