Разная скорость анимации при использовании css-transition на события mouseover и mouseout

Скажем, возникла необходимость, чтобы скорость анимации для CSS-transition была разная при событиях mouseover и mouseout. Пусть при наведении (mouseover) курсора прозрачность элемента меняется плавно, а при уходе с элемента (mouseout) прозрачность восстанавливается быстрее.
Для этого надо написать следующую последовательность CSS-правил:


.selector {
    opacity: 1;/*for example*/
    transition: opacity .5s ease-in-out;
}
.selector:hover {
    opacity: .5;/*for example*/
    transition: opacity 1s ease-in-out;
}

Время анимации указанное в первом правиле будет использовано при анимации на mouseout!
А время из второго правила — для анимации на mouseover!

P.S. Браузерные префиксы к transition можете добавить как вручную, так и используя пре- или пост-процессоры для CSS (grunt, gulp плагины etc).

Разная скорость анимации при использовании css-transition на события mouseover и mouseout: 2 комментария

  1. Спасибо, долго мучился с этой проблемой.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.