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; }
}

デモ