悬停和鼠标悬停的不同 CSS 过渡延迟？

Question

是否可以在“状态”之间使用具有不同延迟切换的 CSS3 转换？例如，我试图让一个元素在悬停时立即更高，然后在“mouseout”上等待一秒钟，然后再滑回元素的初始高度。

演示页面： jsfiddle.net/RTj9K（将黑框悬停在右上角）

CSS： #bar { transition:.4s ease-out 0, 1s; }

我认为最后的时间安排与延迟有关，但它似乎不像我想象的那样工作。

Answer 1

如果您想在hover 和mouseout 上设置不同的 CSS 过渡延迟，您必须使用相关的选择器来设置它们。在下面的示例中，当元素悬停时，悬停的初始延迟为0，但在mouseout 上，过渡延迟1s。

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }

您可以在下面我问题的更新演示中找到完整的 CSS。我使用了简写transition 属性，值的顺序是：

transition:<property> <duration> <timing-function> <delay>;

答案演示：http://jsbin.com/lecuna/edit?html,css,output

Answer 2

这是一个简化的JSFiddle example。基本上你需要transition-delay 属性：

#transform {
    height:40px;
    width:40px;
    background-color:black;
    transition: .4s ease-out; 
    transition-delay: 2s;
    /*or shorthand: transition: .4s ease-out 2s;*/
}

#transform:hover {
    transition: .4s ease-out; 
    width:400px;
}

Answer 3

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0; }

只是说如果你不输入's'（秒）符号这将不起作用，所以：

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }   /* note "0s" */