Duda

Saludos Miguel, Pensaría que la propiedad transición la debes habilitar en el elemento sobre el cual desees que ocurra el cambio de estado (Independiente del tipo de selector que utilices, ya sea clase, id, elemento). Por ejemplo en el caso de un botón con id “enviar” Si la intención es aplicarlo en el archivo “CSS”, quedaría de la siguiente forma:

#enviar{ transition: 1s all }

Y se adiciona el seudocódigo para definir la interacción con el usuario en este caso : hover

Quedando por ejemplo:

#enviar:hover{ background: darkorange; }

Espero sea de utilidad.

La transición se puede definir tanto en la clase base como en la pseudo-clase :hover. Ambas opciones son válidas y tienen diferentes efectos.

Definir la transición en la clase base: Esto significa que la transición se aplicará a la propiedad específica incluso cuando no se esté realizando el :hover. Esto puede ser útil si quieres que haya una animación suave tanto al hacer hover como al volver al estado normal.

code: .element { transition: propiedad tiempo; }

.element:hover { /* Cambios al hacer hover */ }

Definir la transición dentro de la pseudo-clase :hover: En este caso, la transición solo se aplicará cuando el elemento esté en estado de :hover, lo que puede dar un efecto más enfocado y específico.

code: .element { /* Estilos base */ }

.element:hover { transition: propiedad tiempo; /* Cambios al hacer hover */ }

Ambas formas son válidas y dependen de la preferencia del diseñador y del efecto deseado en el sitio web.