애니메이션 페이드 인을위한 불투명도 전환

Question

저는 친구 및 가족을 위해 크리스마스 전자 카드를 사용해 왔으며 일부에는 페이드 인 전환/애니메이션이 포함되어 있습니다. 대체 솔루션 (예 : http://fvsch.com/code/transition-fade/test5.html)과 같은 솔루션을 찾았지만 지금은 코드가 작동하지 않는 이유를 모르겠습니다. 애니메이션은 불투명하지 않은 것입니까?

코드 : 당신이 .. 배경으로 이미지를 사용하는 것처럼 당신이 height 및 width을 제공하는 데 필요한 모든의

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

Answer 1

먼저 당신의 div 또한 당신은 정말 위치 절대 필요합니까? 그렇다면 position: relative; 컨테이너를 사용하고 있는지 확인하는 것보다 높이와 너비를 설정 했으므로 사용중인 이미지에 따라 바꿀 수 있으며 opacity: 0.0;도 필요하지 않습니다. opacity: 0;이면 충분합니다. 당신이 페이드 아웃 페이드 인 효과를 원하는 경우에 당신이 내 다른 답변을 볼 수있는 것보다, 무한 애니메이션 반복

Demo

#ChristmasTree { 
    position:relative; 
    left:250px; 
    top:20px; 
    height: 200px; 
    width: 300px; 
    background-image:url(http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif); 
    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; 
    animation-iteration-count:infinite; 
} 

에 대한 animation-iteration-count:infinite;을 추가 here