css - 不透明度属性的简单 (?) CSS 动画

Question

好吧，我不明白这个。我以前做过 CSS3 动画，但由于某种原因，简单地为不透明度设置动画现在对我不起作用。我错过了什么愚蠢的东西吗？

CSS：

@-webkit-keyframes fadein {
    from: { opacity: 0; }
    to: { opacity: 1; }
}

@-moz-keyframes fadein {
    from: { opacity: 0; }
    to: { opacity: 1; }
}

@keyframes fadein {
    from: { opacity: 0; }
    to: { opacity: 1; }
}

#foo {
    background-color: green;
    color: white;
    -webkit-animation: fadein 2s ease-in alternate infinite;
    -moz-animation: fadein 2s ease-in alternate infinite;
    animation: fadein 2s ease-in alternate infinite;
}

HTML：

<div id="foo">This is Foo!</div>

我也将它作为小提琴发布：http: //jsfiddle.net/NRutman/Lcyvy/

任何帮助，将不胜感激。

谢谢，-内特

Answer 1

from和之后不需要冒号to：

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

http://jsfiddle.net/Lcyvy/6/

Answer 2

改变

@keyframes fadein {
    from: { opacity: 0; }
    to: { opacity: 1; }
}

至

@keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

演示