Las transiciones en CSS nos permiten controlar la forma en que se produce la transición entre los dos estados del elemento. Por ejemplo, al pasar el mouse sobre un botón, puede cambiar el color de fondo del elemento con la ayuda del selector CSS y la pseudoclase . Sin embargo, podemos cambiar cualquier otra combinación de propiedades. La transición nos permite determinar cómo se produce el cambio de color. Podemos usar las transiciones para animar los cambios y hacer que los cambios sean visualmente atractivos para el usuario y, por lo tanto, brindar una mejor experiencia de usuario e interactividad. En este artículo, le mostraremos cómo animar la transición entre las propiedades CSS.
Hay cuatro propiedades CSS que debe usar, en su totalidad o en parte (al menos dos, propiedad de transición y duración de transición, son obligatorias), para animar la transición. Todas estas propiedades deben colocarse junto con otras propiedades CSS del estado inicial del elemento:
- propiedad de transición: esta propiedad le permite seleccionar las propiedades CSS que desea animar durante la transición (cambio).
Sintaxis:
transition-property: none | all | property | property1, property2, ..., propertyN;
valores :
- none se utiliza para especificar que no se debe seleccionar ninguna propiedad.
- all se usa para especificar todas las propiedades que se seleccionarán, aunque no todas las propiedades se pueden animar, solo se influirá en las propiedades que se pueden animar.
- Podemos especificar una sola propiedad o un conjunto de propiedades separadas por comas property1, property2, …, propertyN .
- transición-duración: esta propiedad le permite determinar cuánto tiempo llevará completar la transición de una propiedad CSS a la otra.
Sintaxis:
transition-duration: time;
Aquí, el tiempo puede estar en segundos o milisegundos (ms), debe usar ‘s’ o ‘ms’ después del número (sin comillas).
- transición-tiempo-función: Esta propiedad le permite determinar la velocidad de cambio y la forma de cambio, durante la transición. Por ejemplo, el cambio debe ser rápido al principio y lento al final, etc.
Sintaxis:
transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear| step-start|step-end;
Tenga en cuenta que hay otros valores que puede tomar esta función de temporización de transición, solo se mencionan aquí los más frecuentes y simples.
- transición-retraso: esta propiedad le permite determinar la cantidad de tiempo de espera antes de que la transición realmente comience a tener lugar.
Sintaxis:
transition-delay: time;
Aquí, nuevamente, el tiempo puede estar en segundos o milisegundos (ms), y debe usar ‘s’ o ‘ms’ después del número (sin comillas).
La propiedad abreviada Puede combinar las cuatro propiedades de transición mencionadas anteriormente en una sola propiedad abreviada, de acuerdo con la sintaxis que se proporciona a continuación. Esto nos ahorra escribir códigos largos y evita que nos ensucien. Tenga en cuenta el orden de propiedad, tiene importancia.
Sintaxis:
transition: (property name) | (duration) | (timing function) | (delay);
El valor es tomado por son los mismos que los mencionados anteriormente. Esta propiedad debe colocarse con otras propiedades CSS, si las hay, del estado inicial. Debe usar al menos el nombre de la propiedad y la duración para obtener cualquier efecto de animación. Además, el orden de los valores es importante. El primer valor es el nombre de la propiedad, el segundo la duración y así sucesivamente, como se indica arriba. Entonces, si solo se menciona un número, se tomará como duración y no como un retraso.
Ejemplo: Cambio de propiedad sin usar transiciones.
<!DOCTYPE html>
<html>
<head>
<title>CSS Transition</title>
<style>
h1{
color: green;
text-align: center;
}
div.one{
height: 150px;
width: 150px;
border: 1px dashed black;
margin: 0 auto;
background: #FFEBEE;
}
div.one:hover{
height: 300px;
width: 300px;
background: #BBDEFB;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div class="one">
</div>
</body>
</html>
Producción:
Ejemplo: Cambio de propiedad usando transiciones.
<!DOCTYPE html>
<html>
<head>
<title>CSS Transition</title>
<style>
h1{
color: green;
text-align: center;
}
div.one{
height: 150px;
width: 150px;
border: 1px dashed black;
margin: 0 auto;
background: #FFEBEE;
transition: height 2s, width 2s, background 2s;
}
div.one:hover{
height: 300px;
width: 300px;
background: #BBDEFB;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div class="one">
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con Transition se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari