悬停和鼠标悬停的不同 CSS 转换延迟？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5921073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Different CSS transition-delays for hover and mouseout?
提问by Marcel
Is it possible to use CSS3 transitions with a different delay switching between "states"? For example, I'm trying to make an element immediately higher upon hover then on 'mouseout' to wait a second before sliding back to the element's initial height.
是否可以在“状态”之间使用具有不同延迟切换的 CSS3 转换？例如，我试图让一个元素在悬停时立即更高，然后在“鼠标移出”上等待一秒钟，然后再滑回元素的初始高度。
Demo page:jsfiddle.net/RTj9K(hover black box in top-right corner)
演示页面：jsfiddle.net/RTj9K（在右上角悬停黑框）
CSS:#bar { transition:.4s ease-out 0, 1s; }
CSS：#bar { transition:.4s ease-out 0, 1s; }
I thought the timings on the end related to delay but it doesn't seem to be working the way I'd imagined.
我认为最后的时间与延迟有关，但似乎并没有像我想象的那样工作。
回答by Marcel
If you want different CSS transition delays on hoverand mouseout, you have to set them using the relevant selectors. In the example below, when an element is hovered, the initial delay on hover is 0but on mouseoutthe transition is delayed by 1s.
如果你想在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; }
You can find the full CSS in my question's updated demo below. I've used the shorthand transitionproperty, the order of the values are:
您可以在下面我的问题的更新演示中找到完整的 CSS。我使用了速记transition属性，值的顺序是：
transition:<property> <duration> <timing-function> <delay>;
Answer Demo: http://jsbin.com/lecuna/edit?html,css,output
答案演示：http: //jsbin.com/lecuna/edit?html,css,output
回答by Dan Manastireanu
Here is a simplified JSFiddle example. Basically you need the transition-delayproperty:
这是一个简化的JSFiddle 示例。基本上你需要的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;
}
回答by Neboj?a Lo?njakovi?
/* 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; }
Just to say that this won't work if you do not enter 's' (seconds) symbol, so:
只是说如果您不输入“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" */
