Проблема с задержкой CSS

Question

Я пытаюсь отложить переход CSS, но, похоже, он не работает. Вот то, что я хочу, чтобы это произошло:

1. Начало видео

2. Переместить указатель мыши из видео

3. Панель управления сжимается, но игра-прогресс становится больше.

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

Как вы можете видеть в CodePen пера, бар плей-прогресс становится больше, прежде чем я хочу его: http://codepen.io/mboles/pen/mJeJOO

Вот это CSS настоящее время я использую:

#myPlayerID.vjs-has-started.vjs-user-inactive .vjs-progress-control { 
    -webkit-transform: translateY(-25px); 
} 

#myPlayerID.vjs-has-started.vjs-user-inactive .vjs-play-progress { 
    -transition-delay: height 3s; 
    height: 10px; 
} 

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

Многие Matt Благодарения и

Answer 1

Оказывается с переходной задержкой вы не можете поставить свойство с задержкой, она должна быть явно указано, используя переходную-свойство. Таким образом, решение таково:

#myPlayerID.vjs-has-started.vjs-user-inactive .vjs-play-progress { 
    height: 10px; 
    transition-property: height; 
    -transition-delay: 3s; 
    -webkit-transition-delay: 3s; 
}