내 기본 CSS 애니메이션 앞에 fadein 추가

Question

애니메이션을 사용하기 전에 #loader에 CSS가있는 FadeIn을 추가하고 싶지만 작동하지 않습니다. 여기에서 테스트 할 수 있습니다. http://codepen.io/AntoinePlu/pen/yLvdi

이유가 무엇입니까? 내 CSS 여기

<div id="wrapper"> 
    <ul id="loader"> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    </ul> 
</div> 

: 그리고 당신이 대답을

body{background-color:#39414D;} 

#wrapper { 
    margin: 5% auto; 
    display:block; 
    width:300px; 
} 
#loader{ 
    margin: auto; 
    width:100px; 
    height:100px; 
    list-style:none; 
} 

#loader li{ 
    background-color:#ffffff; 
    width:8px; 
    height:40px; 
    float:left; 
    margin-right:6px; 
    border-radius: 8px; 
    -webkit-animation: fadein 4s; 
} 

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


@-webkit-keyframes insights { 
    0%{ 
     height: 10px; 
    margin-top: 90px; 
    } 

    50%{ 
     height: 50px; 
    margin-top: 50px; 
    } 
    100%{ 
     height: 10px; 
    margin-top: 90px; 
    } 
} 

#loader li:nth-child(1){ 
    -webkit-animation: insights 1s ease-in-out infinite -0.8s; 
} 
#loader li:nth-child(2){ 
    -webkit-animation: insights 1s ease-in-out infinite -0.6s; 
} 
#loader li:nth-child(3){ 
    -webkit-animation: insights 1s ease-in-out infinite -0.4s; 
} 
#loader li:nth-child(4){ 
    -webkit-animation: insights 1s ease-in-out infinite -0.2s; 
} 
#loader li:nth-child(5){ 
    -webkit-animation: insights 1s ease-in-out infinite 0; 
} 

감사

내 HTML있다!

Answer 1

대신 @-webkit-keyframes 'fadein'의

및 @-webkit-keyframes 'insights'는 코드

http://codepen.io/anon/pen/xjuyn