Как мне «вызвать» CSS-код при нажатии ссылки? ⇐ CSS

[Anonymous]

У меня есть код, который через определенный промежуток времени запускает переход. Я использую это, присваивая телу в HTML класс .transition или .transition1.
Однако есть страницы, на которых я бы хотел, чтобы пользователь мог просматривать их как как можно дольше. Поэтому, когда они закончат, я бы хотел, чтобы они могли щелкнуть ссылку на следующую страницу, но до того, как она перейдет, чтобы использовать переход.
Как я могу это сделать?
Вот мой CSS

Код: Выделить всё

.transition{
animation: transitionIn 5s 10s;
}

.transition1{
animation: transitionOut 5s 10s;
}

@keyframes transitionIn{
from{
background-color: #106560;
opacity:1;
transform: translateX(100%);
}

to{
background-color: #ffffff;
opacity:1;
transform: translateX(0);
}

}

@keyframes transitionOut{
from{
background-color: white;
opacity:1;
transform: translateX(100%);
}

to{
background-color: #106560;
opacity: 1;
transform: translateX(0);
}

}

@keyframes fadeInUp {
from{
opacity: 0;

}
to{
opacity:1;
transform: translateY(0);

}

}

@keyframes fadeInOut{
from{
opacity:1;

}
to{
opacity:0;
transform:translateY(-10);
}
}

Я пробовал использовать .transition:active, но это не сработало, хотя я и не ожидал, что так получится.

Подробнее здесь: https://stackoverflow.com/questions/766 ... link-click