css - 我可以只在悬停时应用 CSS 过渡吗？

Question

CSS transition 属性可让您在悬停和悬停时都设置动画，如果您按如下所示放置过渡:

#inner{
    opacity:0;
    transition:opacity 2000ms;
}
#outer:hover #inner{
    opacity:1;
}

但是，如果转换移动到 :hover 状态，它只会在悬停时发生。

#inner{
    opacity:0;
}
#outer:hover #inner{
    opacity:1;
    transition:opacity 2000ms;
}

是否有可能做相反的事情，即只在悬停时动画？

Answer 1

这是实现此目的的一种方法(在 :hover 中为过渡属性放置一个 bogus 属性 none) :

#inner2{
    opacity:0;
    transition:opacity 2000ms;
}
#outer:hover #inner2{
    opacity:1;
    transition:none;
}

http://jsfiddle.net/j716sbav/4/

答案已更新以纳入@BoltClock 的建议。使用 none 而不是伪造的属性肯定更优雅。