transiciones CSS3
transiciones CSS3
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:
transición
Soporte para el navegador
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- |
¿Cómo funciona?
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:
- Quiero añadir el efecto de las propiedades CSS
- Especificar la duración del efecto.
Ejemplos
atributo width aplica el efecto de transición, duración de 2 segundos:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
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:
Ejemplos
Disposiciones cuando la suspensión puntero del ratón (: hover) para el elemento <div> cuando:
{
Anchura: 300px;
}
Trate »
Nota: Cuando el cursor del ratón en el elemento, cambia gradualmente su estilo original
Número de cambios
Para agregar más de un efecto del cambio de estilo, añadir atributos separados por comas:
Ejemplos
efectos anchura, altura, y de transición Añadido:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
Trate »
Propiedades de transición
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:
Ejemplos
Utilizar todas las propiedades de transición en un ejemplo:
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
Trate »
Ejemplos
Y ejemplos de los mismos efectos de transición anteriores, pero utiliza las propiedades de transición de la taquigrafía:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
Trate »