一般问题的一般答案。。**过渡无法为自动属性设置动画。**如果过渡不起作用，请检查属性的起始值是否已显式设置。
有时，当开始或结束值为auto时，您可能希望设置height和width的动画。（例如，当div的高度为auto并且必须保持该高度时，要使div塌陷。）在这种情况下，将过渡放在max-height上。给予max-height一个合理的初始值（大于它的实际高度），然后将其转换为0。

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

过渡更像是一个动画。

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

如果页面上的任何地方都有<script>标记（即使在HTML中，即使它是一个带有src的空标记），那么transition必须由某个事件激活（当页面加载时它不会自动触发）。

HTML：

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

CSS：

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

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

这只是一个基本的过渡，以缓解div标签时，它是由10px悬停。transition属性的值可以与class.hover属性沿着编辑，以确定transition的工作方式。

如果你正在使用react，并且遇到了这个问题，请确保你的组件保存在一个不同于父组件的文件中。我的意思是：

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

}

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