Question

我无法让转换在this page上工作，任何人都知道为什么？

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: ***.htc css hacks ..可能有些事情会覆盖您的转换！

你应该看一下：http://www.w3schools.com/css/css3_transitions.asp

Answer 2

对我来说，它有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;
}

Answer 3

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

Answer 4

如果您在页面上的任何位置（即使在HTML中，即使带有<script>的空标签都具有src标签，则必须通过以下方式激活transition：某些事件（页面加载后不会自动触发）。

Answer 5

HTML：

<div class="foo">
    /* whatever is required */
</div>

CSS：

.foo {
    top: 0;
    transition: top ease 0.5s;
}

.foo:hover{
    top: -10px;
}

这只是将div标签悬停在上方时将div标签的大小降低10像素的基本转换。可以将transition属性的值与class.hover属性一起进行编辑，以确定过渡的工作方式。

Answer 6

某些浏览器不支持该代码。也许尝试使用不同的浏览器

CSS3 Transition无法正常工作

6 个答案: