CSS3 Transition无法正常工作

Question

我无法在此页面上进行转换,任何人都知道为什么？

div.sicon a {
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

Answer 1

过渡更像是动画.

div.sicon a {
    background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

因此,您需要通过操作调用该动画.

div.sicon a:hover {
    background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}

还要检查浏览器支持,如果你仍然有任何问题,你要做什么!检查样式表中的css-overrides,并查看behavior: ***.htccss hacks ..可能有些事情会覆盖你的过渡!

你应该看看这个:http://www.w3schools.com/css/css3_transitions.asp

Answer 2

一般问题的一般答案... 过渡无法为自动属性设置动画。如果过渡无效，请检查是否已明确设置属性的起始值。（例如，要使节点折叠，当其高度为auto且必须保持这种方式时，请将过渡设置为max-height。给max-height一个合理的初始值，然后将其过渡为0）

Answer 3

对我来说 display: none;

#spinner-success-text {
    display: none;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    display: block;
}

删除它，改而使用opacity，解决了该问题。

#spinner-success-text {
    opacity: 0;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    opacity: 1;
}