Issue with delaying CSS -

i trying delay css transition, seems not working. here want happen:

1. start video

2. move mouse pointer out of video

3. the control bar shrinks, play-progress gets larger.

4. move mouse pointer in video, control bar returns normal.

as can see in codepen pen, play-progress bar gets larger before want to: http://codepen.io/mboles/pen/mjejoo

here css using:

#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; } 

i have tried change order of transition delay , height, did not solve issue.

many thanks- matt

it turns out transition-delay cannot put property delay, must explicitly stated using transition-property. solution is:

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