La propiedad de transición en CSS se usa para crear alguna transición en un elemento. Esta propiedad cambia el valor sin problemas. Este artículo contiene un efecto de desplazamiento sobre un elemento div para cambiar el ancho y el alto de los elementos después de la transición.
La lista de propiedades de transición se da a continuación:
- propiedad de transición
- duración de la transición
- función de temporización de transición
- transición-retraso
sintaxis:
div {
transition: <property> <duration> <timing-function> <delay>;
}
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:Green;
text-align:center;
}
h3 {
text-align:center;
}
input[type=text] {
width: 100px;
-webkit-transition: width .35s ease-in-out;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Search: <input type="text" name="searchbox"></h3>
</body>
</html>
Salida: 
Nota: Si no se especifica la parte de duración, la transición no tendrá efecto, porque su valor predeterminado es 0. La propiedad de transición especifica principalmente dos cosas. La primera es la propiedad CSS para agregar efectos y la segunda es la duración a menos que la transición tenga menos efecto.
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:Green;
}
div {
width: 1px;
height: 0px;
text-align:center;
background: Green;
-webkit-transition: width 2s, height 2s;
transition: width 2s, height 2s;
}
div:hover {
width: 300px;
height: 240px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-1.jpg"
align="middle"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA