Где разместить переход CSS3

Question

Может быть, это реальная глупый вопрос, но я просто не могу не знать ответ, так вот я иду:

Простой переход фон изменения CSS3 могут быть размещены на сам элемент и также на: зависающем состоянии этого элемента, и он работает! Но: что такое лучшая практика?

Пример:

.example { 
    width: 100px; 
    height: 100px; 
} 

.example:hover{ 
    background-color: blue; 
    color: white; 
    transition: all 2s ease-in; 
} 

это работает так:

.example { 
    width: 100px; 
    height: 100px; 
    transition: all 2s ease-in; 
} 

.example:hover{ 
    background-color: blue; 
    color: white; 
} 

Может кто-нибудь сказать мне, почему это? И что такое лучшая практика?

Answer 1

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

В первом случае переход применяется только к событию hover.

Выберите один вариант в зависимости от того, чего вы хотите достичь.