Сделайте переход стабильным после того, как событие произойдет

Question

Как я могу сделать так, чтобы переход по-прежнему происходил после удаления события! Я хочу изменить высоту div, когда hover будет меньше, но я хочу, чтобы размер был еще меньше, даже когда я удаляю hover из div.

#header{
background-color: red;
height:300px;
width:100%;
-moz-transition:height 500ms linear;
-webkit-transition:height 500ms linear;
-o-transition:height 500ms linear;
-ms-transition:height 500ms linear;
transition:height 500ms linear;
}

#header:hover{
height:100px;
}

Я хочу, чтобы div имел высоту 100px после того, как мышь отключена, могу ли я сделать это, используя только CSS, или мне нужно использовать jQuery, чтобы изменить класс или что-то подобное?

Answer 1

Вы можете сделать "зависание" с помощью всего лишь CSS.

@keyframes hover {
  0% {
    // normal styles
  }
  100% {
    // hover styles
  }
}

.class {
  animation-name: hover;
  animation-duration: 350ms;
  animation-fill-mode: backwards;
  animation-play-state: paused;      
}

.class:hover {
  animation-fill-mode: forwards;
  animation-play-state: running;
}

См. http://cdpn.io/GLjpK и http://lea.verou.me/2014/01/smooth-state-animations-with-animation-play-state/.

Answer 2

Вы не можете сделать "зависание" только с помощью CSS.Вам потребуется добавить класс или встроенный стиль с Javascript, чтобы сохранить внешний вид.