Módulo 01

Entendiendo las Transiciones

Las transiciones de CSS permiten cambiar los valores de las propiedades de forma suave durante un tiempo determinado. En lugar de un cambio instantáneo, puedes controlar la velocidad y la sensación de los cambios de estado.

Para crear un efecto de transición, debes especificar dos cosas: la propiedad CSS a la que deseas aplicar el efecto y la duración del mismo. Si no se indica la duración, la transición no tendrá efecto, ya que el valor predeterminado es 0.

styles.css

.box {
  width: 100px;
  height: 100px;
  background-color: #4f46e5;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
}

.box:hover {
  transform: scale(1.2) rotate(15deg);
  background-color: #3525cd;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}

visibility VISTA PREVIA EN VIVO

magic_button

Pasa el mouse sobre el cuadrado para activar la transición