Por lo general, cuando cambia el valor de la propiedad CSS, el navegador actualizará inmediatamente el estilo correspondiente. Por ejemplo, cuando el mouse pasa sobre el elemento, el estilo definido a través del selector: hover se aplicará inmediatamente al elemento. Se ha agregado una función de transición a CSS3, a través de la cual puedes pasar elementos suavemente de un estilo a otro dentro de un tiempo específico, similar a una animación simple, pero sin recurrir a flash o JavaScript.
CSS proporciona 5 propiedades relacionadas con la transición, de la siguiente manera:
Para implementar con éxito un efecto de transición, se deben definir dos cosas:
(1) Propiedades de parámetros y efectos de transición en elementos;
(2) La duración del efecto de transición.
Consejo: El efecto de transición generalmente ocurre cuando el mouse se coloca sobre el elemento. Si no se establece la duración de la transición, el efecto de transición no tendrá efecto porque el valor predeterminado del tiempo de transición es 0.
1. propiedad de transición
El atributo de propiedad de transición se utiliza para establecer el nombre del atributo en el elemento que participa en la transición. El formato de sintaxis es el siguiente:
propiedad de transición: ninguna|todas|propiedad;
La descripción del parámetro es la siguiente:
ninguno: indica que ningún atributo participa en el efecto de transición;
todos: indica que todos los atributos participan en el efecto de transición;
propiedad: define una lista de nombres de propiedades CSS que aplican efectos de transición. Utilice comas para separar varios nombres de propiedades.
El código de muestra es el siguiente:
<!DOCTYPEhtml><html><head><style>div{ancho:100px;alto:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-p roperty:ancho,fondo;}div:hover{ancho:200px;fondo-color:azul;}</style></head><body><div></div></body></html>Resultados de ejecución:
2. duración de la transición
El atributo de duración de transición se utiliza para establecer el tiempo que lleva la transición (en segundos o milisegundos). La sintaxis es la siguiente:
duración de la transición: tiempo;
Entre ellos, el tiempo es el tiempo que lleva completar el efecto de transición (en segundos o milisegundos). El valor predeterminado es 0, lo que significa que no habrá ningún efecto.
Si hay varios atributos participando en la transición, también puede establecer el tiempo de transición para estos atributos por turno. Utilice comas para separar varios atributos, como duración de la transición: 1 s, 2 s, 3 s;. Además, también puede utilizar una hora para establecer el tiempo necesario para la transición para todas las propiedades que participan en la transición. El código de muestra es el siguiente:
<!DOCTYPEhtml><html><head><style>div{ancho:100px;alto:100px;border:3pxsolidblack;margin:10px0px0px10px;propiedad-de-transición:ancho, fondo;duración de transición:.25s,1s;}div:hover{ancho:200px;color de fondo:azul;}</style></head><body><div></div></body>< /html>3. función de sincronización de transición
El atributo de función de sincronización de transición se utiliza para establecer el tipo de animación de transición. Los valores opcionales del atributo son los siguientes:
4. retraso de transición
El atributo de retardo de transición se utiliza para establecer cuándo comienza el efecto de transición. El formato de sintaxis del atributo es el siguiente:
retraso de transición: tiempo;
Entre ellos, el parámetro tiempo se utiliza para establecer el tiempo de espera antes de que comience el efecto de transición, en segundos o milisegundos.
5. transición
El atributo de transición es la abreviatura de los cuatro atributos anteriores. A través de este atributo, los cuatro atributos anteriores se pueden configurar al mismo tiempo. El formato de sintaxis de los atributos es el siguiente:
transición:propiedad-de-transiciónduración-de-transiciónfunción-de-tiempo-de-transiciónretraso-de-transición;
En el atributo de transición, la propiedad de transición y la duración de la transición son parámetros obligatorios, y la función de temporización de transición y el retardo de transición son parámetros opcionales. Pueden omitirse si no son necesarios. Además, también se pueden configurar varios grupos de efectos de transición a través del atributo de transición. Cada grupo está separado por comas. El código de muestra es el siguiente.