我一直在玩CSS过渡并制作了这个
JSFiddle
目前所有主流浏览器都支持transition属性,并且不需要供应商前缀(但是我将它们包含在我的小提琴中).我还在W3C site搜索了一些已知的转换期限问题并没有找到任何问题.
HTML
<div class="foo"></div>
CSS
.foo {
background: #4FC093;
display: block;
width: 600px;
height: 600px;
Box-shadow: 0 0 300px inset;
margin: 0 auto;
border-radius: 50%;
cursor: pointer;
transition: all 10s ease;
}
.foo:hover {
width: 100px;
height: 100px;
Box-shadow: 0 0 50px inset;
}
Google Chrome / webkit浏览器存在的问题
If I remove the cursor earlier before the transition ends,it goes back to it’s initial state by taking (
10s) the duration defined in the transition property.For example :
I removed the cursor after transition played for1sit goes back to it’s initial state by taking10s.In Firefox and IE10+,the duration of changing back to it’s initial state is the same duration of actual transition playing time.
要查看它的动作,请将鼠标悬停在.foo div上,并在转换开始时快速移除光标.
[P.S：10s的持续时间可能很无聊但我已经明确地观察了这个问题. ]
解决方法
你可以添加第二个转换,让所有人都能更快地恢复“恢复”动画(如果它适用于你想要的).
请参阅下面的updated fiddle here和部分CSS：
.foo {
/* default properties */
transition: all 1s ease;/* this transition will apply when user exits hover state */
}
.foo:hover {
/* properties for hover */
transition: all 10s ease;/* this transition will apply when user hovers */
}
