Скажем, возникла необходимость, чтобы скорость анимации для 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).