Transición de CSS se desvanece

Así que he usado transiciones CSS antes, pero tengo un caso único con este. Estoy escribiendo un plugin personalizado para crear modales. Esencialmente creo un div en la marcha.document.createElement('div') y anexarlo al cuerpo con unas pocas clases. Estas clases definen el color y la opacidad. Me gustaría usar estrictamente CSS para poder desvanecerse en esta división, pero hacer que el cambio de estado parezca difícil ya que requiere cierta interacción del usuario.

Intenté algunos selectores avanzados con la esperanza de que se produjera un cambio de estado, probé la consulta de los medios con la esperanza de cambiar de estado ... buscando ideas y sugerencias, realmente quiero mantener esto en CSS si es posible

Respuestas a la pregunta(3)

Su respuesta a la pregunta