CSS3转换不工作

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

一般问题的一般答案…转场不能使自动属性动起来。如果你有一个转换不工作，检查是否显式设置了属性的起始值。

有时，当起始值或结束值为auto时，您将想要动画height和width。(例如，要使div崩溃，当它的高度是auto并且必须保持这种状态。)在这种情况下，把过渡放在max-height上。给max-height一个合理的初始值(大于其实际高度)，然后将其转换为0。

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

Transition更像是动画

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覆盖在你的样式表，也检查behavior: ***.htc css hack ..可能有什么东西压倒了你的过渡!

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

Answer 4

如果你有一个<script>标签在你的页面的任何地方(即使在HTML中，即使它是一个空的标签与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标签在悬停时向上移动10px。转换属性的值可以与类一起编辑。

Answer 6

如果你在使用react时遇到了这个问题，请确保你的组件保存在与父组件不同的文件中。我的意思是:

const Parent = () => {
    const ChildComp = () => (
    // element whose transition wont work
    )
    return (
        <div>
           <ChildComp />
        </div>
    )
}

Answer 7

部分浏览器不支持此代码。或许可以尝试使用不同的浏览器