CSS CSS3 过渡缓进缓出框阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16163922/
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
CSS3 Transition Ease in and out Box Shadow
提问by Tom Pinchen
I am trying to get div id to ease in and out of a box shadow using CSS3.
我正在尝试使用 CSS3 使 div id 轻松进出框阴影。
The current CSS I have is:
我目前拥有的 CSS 是：
#how-to-content-wrap-first:hover {
-moz-box-shadow: 0px 0px 5px #1e1e1e;
-webkit-box-shadow: 0px 0px 5px #1e1e1e;
box-shadow: 0px 0px 5px #1e1e1e;
-webkit-transition: box-shadow 0.3s ease-in-out 0s;
-moz-transition: box-shadow 0.3s ease-in-out 0s;
-o-transition: box-shadow 0.3s ease-in-out 0s;
-ms-transition: box-shadow 0.3s ease-in-out 0s;
transition: box-shadow 0.3s ease-in-out 0s;
The issue I am having is that on the first hover of the element there is no easing in or out and then any subsequent hovers ease in but do not ease out.
我遇到的问题是，在元素的第一次悬停时，没有缓入或缓出，然后任何后续悬停缓入但不缓出。
Any advice people have would be much appreciated?
人们的任何建议将不胜感激？
回答by Mr. Alien
You need to use transitions on .classand not .class:hover
您需要使用过渡.class而不是.class:hover
div {
height: 200px;
width: 200px;
box-shadow: 0;
transition: box-shadow 1s;
border: 1px solid #eee;
}
div:hover {
box-shadow: 0 0 3px #515151;
;
}<div></div>