В чем разница между применением CSS-свойства перехода при наведении, а не в обычном состоянии?

Я учу CSS3. Теперь, что я видел на сайте w3schools:

CSS

#ID {
  transition: transform 3s;
}

#ID:hover {
  transform: rotateX(20deg);
}

И то, что я сделал, это:

CSS:

#ID:hover {
  transform: rotateX(20deg);
  transition: transform 3s;
}

Оба работают. Итаквопрос является: Могу ли я поместить оба перехода и любое свойство преобразования в один и тот же селектор? Или это не правильный путь?

 Lee06 июл. 2016 г., 16:23
Первый пример, как правило, правильный, так как время перехода указано в неизмененном состоянии. Но это основано на большинстве примеров, которые я видел, как генерировать переходы при наведении курсора.

Ответы на вопрос(4)

Когда указан переход для:hover состояние, переход не будет работать на мышь.

1-й случай:

Весь ваш переход в#ID будет переход 3с. Когда вы наводите ваш #ID, ваше преобразованиеrotateX(20deg).

2-й случай:

Когда вы наводите#ID, у вас есть переход 3с.

В общем и целом :

Все переходы с первого css будут иметь длительность 3 с. Затем вы можете применить переходы на#ID из разных мест. В то время как во втором случае вы разделяете их, и если вы хотите, чтобы другие переходы инициировались чем-то другим, кроме hover, вам придется снова указать продолжительность.

Оба верны

Решение Вопроса

КОРОТКИЙ ОТВЕТ:

Если вы определите свойtransition недвижимость вelement:hover, будеттолько применить в этом состоянии.

ОБЪЯСНЕНИЕ:

Какие бы свойства CSS вы не указали вelement:hover будуттолько применяется, когда элемент находится в состоянии наведения, тогда как какие свойства CSS вы определяете в своемelement будет применяться ви то и другое состояния.

Свойство перехода объявлено в нормальном состоянии:

Посмотрите, как всегда выполняется переход, когда состояние элемента изменяется. Когда вы прекратите зависание элемента, он все равно вернется в нормальное состояние.

КОД СНИПЕТТ:

#ID {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: royalblue;
  transition: transform 1s;
}
#ID:hover {
  transform: rotateX(60deg);
}
<div id="ID"></div>

Передача имущества, заявленного в охраняемом состоянии:

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

КОД СНИПЕТТ:

#ID {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: royalblue;
}
#ID:hover {
  transition: transform 1s;
  transform: rotateX(60deg);
}
<div id="ID"></div>

 user577363406 июл. 2016 г., 16:42
Спасибо. Это было действительно хорошее объяснение.
 Lee06 июл. 2016 г., 16:47
Честная игра, это отличный ответ. +1

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

Ваш ответ на вопрос