MaxXxaM

Спасибо! В целом помогло, однако по порту 9998 не отвечает apache.
Конфиг apache:

<VirtualHost *:9998>
    ServerAdmin info@domain2.ru
    DocumentRoot "C:/WEB/Apache24/htdocs/domain2.ru"
    ServerName domain2.ru
    ErrorLog "logs/domain2.ru-error.log"
    CustomLog "logs/domain2.ru-access.log" common
</VirtualHost>

Все же интересно почему поддомены на одном порту работали успешно, а с другим доменом возникла такая проблема. + это похоже на костыль, так как придется для каждого нового сайта подбирать отдельный порт.

Проблему с ответом apache решил добавив дополнительно директиву
Listen 9999
Listen 9998

Не пойму почему через vhost он не слушает указанные порты, но видимо такова логика работы.
Все же не нравится мне этот метод с выделением портов. Что-то здесь не так.

Одними только средствами CSS такую задачу не реализовать. Если только анимацию использовать по keyframe. Но управление классами в любом случае будет опираться на JS. Так как подразумевается работа с таймером. CSS для этого не предназначен.
На js порекомендовал бы использовать таймер с определенной задержкой. Не совсем понял смысла зачем вызывать проверку каждую секунду, если можно запустить обратный таймер с требуемой задержкой. По нажатию пользователя на клавиатуру, сбрасывать таймер и запускать заново по сохраненному идентификатору. По завершению отсчета менять класс у определенного блока. Все мне кажется довольно просто, дальше уже некуда упрощать. А с анимацией на CSS поиграться в зависимости от предпочтений.
var id = setInterval(fn, delay);