延迟CSS的问题

我试图延迟CSS转换，但它似乎不起作用。以下是我希望发生的事情：

开始录像

将鼠标指针移出视频

控制栏缩小，但播放进度变大

将鼠标指针移回视频中，控制栏将恢复正常

正如您在CodePen笔中看到的，播放进度条在我希望它：

以下是我目前使用的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

事实证明，使用transition delay时，您不能将属性与延迟放在一起，必须使用transition属性明确说明。因此，解决方案是：

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