Actualmente estoy haciendo que mi sitio web sea más compatible con dispositivos móviles, pero :hover no funciona en dispositivos móviles. Tengo botones y otros elementos con efectos de transición de desplazamiento, así que pensé que la siguiente mejor solución sería ejecutar el efecto cuando el elemento está en el medio de la pantalla del usuario, como en la aplicación de YouTube, comenzará a reproducir el comienzo de un video si está en el medio de tu pantalla. ¿Cómo uso Javascript para detectar cuándo un elemento está verticalmente en el medio de la pantalla de un usuario, digamos en algún lugar en el rango de 300 px a 600 px, y para aplicar una transición css, como cambiar el color de blanco a rojo durante 1 segundo?