css - 延迟CSS的问题

我正在尝试延迟CSS过渡，但似乎无法正常工作。这是我想发生的事情：


开始视频
将鼠标指针移出视频
控制栏会缩小，但播放进度会变大。
将鼠标指针移回视频中，控制栏将恢复正常。


如您在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;
}

我试图更改转换延迟和高度的顺序，但是并没有解决问题。

非常感谢-
马特

最佳答案

事实证明，使用transition-delay不能使属性具有延迟，必须使用transition-property明确声明该属性。所以解决方案是：

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