CSS CSS3 过渡不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7924038/
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 not working
提问by Extelliqent
I couldn't get transitions to work on this page, anybody has any idea why?
我无法在此页面上进行转换，有人知道为什么吗？
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 */
}
回答by Berker Yüceer
Transition is more like an animation.
过渡更像是一个动画。
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 */
}
So you need to invoke that animation with an action.
所以你需要用一个动作来调用那个动画。
div.sicon a:hover {
background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}
Also check for browser support and if you still have some problem with whatever you're trying to do! Check css-overrides in your stylesheet and also check out for behavior: ***.htccss hacks.. there may be something overriding your transition!
还要检查浏览器支持，如果您尝试做的事情仍然有问题！检查样式表中的 css-overrides 并检查behavior: ***.htccss hacks .. 可能有一些东西覆盖了您的过渡！
You should check this out: http://www.w3schools.com/css/css3_transitions.asp
回答by bbsimonbb
A general answer for a general question... Transitions can't animate properties that are auto.If you have a transition not working, check that the starting value of the property is explicitly set. (For example, to make a node collapse, when it's height is auto and must stay that way, put the transition on max-height instead. Give max-height a sensible initial value, then transition it to 0)
一般问题的一般答案...转换不能为自动属性设置动画。如果您的过渡不起作用，请检查是否明确设置了属性的起始值。（例如，要使节点折叠，当它的高度为 auto 并且必须保持这种状态时，请将转换放在 max-height 上。给 max-height 一个合理的初始值，然后将其转换为 0）
回答by Abdoosk
For me, it was having display: none;
对我来说，它有 display: none;
#spinner-success-text {
display: none;
transition: all 1s ease-in;
}
#spinner-success-text.show {
display: block;
}
Removing it, and using opacityinstead, fixed the issue.
删除它并opacity改用它解决了这个问题。
#spinner-success-text {
opacity: 0;
transition: all 1s ease-in;
}
#spinner-success-text.show {
opacity: 1;
}
回答by Abel W.
If you have a <script>tag anywhere on your page (even in the HTML, even if it is an empty tag with a src), then a transitionmust be activated by some event (it won't fire automatically when the page loads).
如果您<script>在页面上的任何位置都有一个标签（即使在 HTML 中，即使它是一个带有 的空标签src），那么 atransition必须由某个事件激活（它不会在页面加载时自动触发）。
回答by SandstormNick
HTML:
HTML：
<div class="foo">
/* whatever is required */
</div>
CSS:
CSS：
.foo {
top: 0;
transition: top ease 0.5s;
}
.foo:hover{
top: -10px;
}
This is just a basic transition to ease the div tag up by 10px when it is hovered on. The transition property's values can be edited along with the class.hover properties to determine how the transition works.
这只是将鼠标悬停在 div 标签上时将 div 标签缓和 10px 的基本过渡。过渡属性的值可以与 class.hover 属性一起编辑，以确定过渡如何工作。
