Свойства перехода CSS в начальное состояние или конечное состояние?

Question

Я только что прочитал https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions.

Существует простой пример, как показано ниже:

<div class="box"></div> 

и CSS:

.box { 
    border-style: solid; 
    border-width: 1px; 
    display: block; 
    width: 100px; 
    height: 100px; 
    background-color: #0000FF; 
    -moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s; 
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s; 
    -o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s; 
    transition:width 2s, height 2s, background-color 2s, transform 2s; 
} 
.box:hover { 
    background-color: #FFCCCC; 
    width:200px; 
    height:200px; 
    -moz-transform:rotate(180deg); 
    -webkit-transform:rotate(180deg); 
    -o-transform:rotate(180deg); 
    transform:rotate(180deg); 
} 

При перемещении мыши наведите окно, переход выполнить, как и следовало ожидать, например, от .box (исходного состояния) до .box:hover (конечное состояние). Однако при перемещении мыши из коробки переход выполняется обратным образом, например, от .box:hover до .box.

Мой вопрос: мы устанавливаем свойства перехода CSS в начальное состояние или в конечное состояние? Являются ли технические характеристики этой проблемой?

Answer 1

Вы можете указать свойства transition-* либо в режиме «прямого», либо «обратного» перехода. Это не только должно быть на первом. transition module вид ссылается на это:

Авторы могут указать значение «перехода-длительность», «перехода-временной-функцию», или «переход задержки» в том же правиле, где они определяют значение, инициирует переход или может изменять эти свойства одновременно с изменением свойства, которое запускает переход. Поскольку это новые значения этих свойств перехода, которые влияют на переход, эти значения будут использоваться для переходов к связанным переходным значениям.

В приведенном ниже примере я дал transition-duration на :hover из 4s, но вы заметите, как только вы разнюхивать это восходит к значению 1s вы указали в вашем примере. Вы можете применить одно и то же правило к другому dynamic pseudo-classes.

http://jsfiddle.net/BZeQW/1/