css - フェードイン アニメーションの不透明度の遷移

Question

私は友人や家族のためのクリスマスの電子カードに取り組んでおり、その一部にはトランジション/アニメーションのフェードインが含まれています. 別の解決策を見つけました (このようなもの: http://fvsch.com/code/transition-fade/test5.html ) が、現在持っているコードが機能しない理由がわかりません -アニメーションは不透明度が好きではありませんか?

コード：

#ChristmasTree{
    position:absolute;
    left:750px;
    top:20px;
    background-image:url(http://i.imgur.com/uk7Z3.png);
    opacity:0.0;    
    animation-play-state:running;
    -moz-play-state:running;
    -ms-play-state:running;
    -o-play-state:running;
    -webkit-animation-play-state:running;    
    animation:treeFadeIn 3s;
    -moz-animation:treeFadeIn 3s;
    -ms-animation:treeFadeIn 3s;
    -o-animation:treeFadeIn 3s;
    -webkit-animation:treeFadeIn 3s;
}

@-moz-keyframes treeFadeIn{
    from{opacity:0.0}
    to{opacity:1}
}

@-webkit-keyframes treeFadeIn{
    from{opacity:0.0}
    to{opacity:1}
}

@-o-keyframes treeFadeIn{
    from{opacity:0.0}
    to{opacity:1}
}

@-ms-keyframes treeFadeIn{
    from{opacity:0.0;}
    to{opacity:1;}
}