CSS Transitions

Transiciones suaves entre estados usando cubic-bezier para controlar la curva de velocidad.

Click para animar

Código

const [active, setActive] = useState(false)

<div
  onClick={() => setActive(!active)}
  style={{
    width: "80px",
    height: "80px",
    borderRadius: active ? "50%" : "12px",
    background: active ? "#534AB7" : "#1D9E75",
    cursor: "pointer",
    transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)"
  }}
/>