Paso 1:
debes crear un archivo en HTML. (de preferencia puedes crear la en el editor de código Visual Studio Code)
y crearemos un div con la clase "box"
Paso 2: Debes crear un archivo en CSS, Al cual le añadimos un cuadrado en un fondo. Puedes agregarle el color o el tamaño que tu gustes.
para crear la animación deberemos usar la propiedad “transition”.
utilizamos la propiedad “transition” de CSS para poder cambiar los estados del cuadro. es decir, esta nos ayudara para que cuando el puntero del mouse pase por encima del cuadro este se agrande.
agregamos el valor All para que se aplique la transición en todas las propiedades que puedan ser animadas. (el cuadrado).
el 0.5s es el tiempo que puede durar la animacion.
El ease-in-out significa que la transición iniciara lentamente, aumentara la velocidad en el medio y finalmente terminara lentamente la animación
La propiedad transform nos permite aplicar transformaciones visuales, el valor “scale” nos sirve para que cambie de tamaño en proporción al valor agregado. (el 1.5 significa el tamaño al cual se agrandara)
Podemos agregar mas valores como por ejemplo:
que nos sirve para rotar y mover el objeto que queremos animar, en este caso el cuadrado.
Este tipos de animaciones sencillas no puedes permitir personalizar mas creativamente nuestras paginas web, asi como poder crear un tipo de billetera para que cuando el usuario desplace, pulse nuestro item puedan desplegarse mas opciones.