En este artículo, vamos a aprender cómo podemos tener múltiples transiciones en un elemento. Generalmente, aplicamos o creamos más de una transición para crear algunos efectos en nuestro diseño. En CSS hay ciertas propiedades que se pueden cambiar.
Enfoque: para tener múltiples transiciones en un elemento, básicamente tenemos dos formas. Uno es especificar las propiedades a las que se realizará la transición, el tiempo de duración de la transición y la función de tiempo de la transición por separado y dejar que funcione. Otra forma de implementar esto es agregar todos los detalles sobre la transición en forma abreviada donde agregamos la propiedad, la duración del tiempo y la función de tiempo de las propiedades y las separamos con comas .
Palabras clave de transición:
- transición: esta palabra clave se puede usar con una propiedad CSS en CSS en línea, interno o externo. Esto necesita la propiedad (transition-property) que se transicionará, la duración del tiempo (transition-duration) de la transición, la función de temporización (transition-timing-function) de la transición. Podemos dar esos valores individualmente a la propiedad o podemos usar la técnica abreviada para agregarlos todos al mismo tiempo.
- propiedad de transición: se utiliza para especificar las propiedades que se van a cambiar.
- transición-duración: Esto se utiliza para especificar la duración del tiempo durante el cual se realizará la transición de las propiedades.
- función de temporización de transición: se utiliza para especificar la duración del tiempo durante el cual se realizará la transición de las propiedades.
El siguiente ejemplo demuestra el enfoque anterior.
Ejemplo 1: en el código que se proporciona a continuación, hemos agregado transiciones para transformar el color, el borde, el relleno superior e inferior y el tamaño de la fuente utilizando la forma abreviada de transición .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
h3 {
color: brown !important;
}
.container {
display: flex !important;
}
div {
font-family: "Lucida Sans", "Lucida Sans Regular";
font-size: 1rem;
margin: 2rem;
justify-content: center;
display: flex;
border: 10px solid green;
width: 18rem;
height: 7rem;
padding-bottom: 20px;
padding-top: 20px;
transition: color 1s ease-out, padding-top 1s ease-out,
padding-bottom 1s ease-out, font-size 2s ease-out;
}
div:hover {
color: rebeccapurple;
border: 10px solid brown;
padding-top: 100px;
padding-bottom: 30px;
font-size: 1.8rem;
}
</style>
</head>
<body>
<h1 style="color: green; margin: 2rem;">
GeeksforGeeks
</h1>
<h3 style="margin: 2.2rem; margin-top: -2rem">
How to have multiple CSS
transitions on an element?
</h3>
<div>GeeksforGeeks</div>
</body>
</html>
Producción:
Ejemplo 2: en el código que se proporciona a continuación, hemos agregado transiciones para transformar el color, el borde, el relleno superior e inferior, el tamaño de fuente utilizando la propiedad de transición, la duración de la transición y la función de tiempo de transición por separado:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
h3 {
color: brown !important;
}
.container {
display: flex !important;
}
div {
font-family: "Lucida Sans", "Lucida Sans Regular";
font-size: 1rem;
margin: 2rem;
justify-content: center;
display: flex;
border: 10px solid green;
width: 18rem;
height: 7rem;
padding-bottom: 20px;
padding-top: 20px;
transition-property: color, border, padding-top,
padding-bottom, font-size;
transition-duration: 1s;
transition-timing-function: ease-out;
}
div:hover {
color: royalblue;
border: 10px solid grey;
padding-top: 100px;
padding-bottom: 30px;
font-size: 1.8rem;
}
</style>
</head>
<body>
<h1 style="color: green; margin: 2rem;">
GeeksforGeeks
</h1>
<h3 style="margin: 2.2rem; margin-top: -2rem">
How to have multiple CSS
transitions on an element?
</h3>
<div>GeeksforGeeks</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA