지연을 포함하여 CSS3 키 프레임 애니메이션, JS로 전환되었습니다.

Question

3 개의 버튼에 애니메이션을 적용하려고합니다 (페이드 인). 이것은 나의 HTML입니다 :

<aside> 
    <p><a href="#"><i class="icon-facebook"></i> Share</a></p> 
    <p><a href="#"><i class="icon-twitter"></i> Tweet</a></p> 
    <p><a href="#"><i class="icon-envelope"></i> Mail</a></p> 
</aside> 

이것은 내가 지금하고 싶은 무엇

.aside-check { 
    animation: fadein 2s; 
} 

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

, 모든 단락 조금 지연을 제공하는 것입니다 (클래스 .aside 검사는 자바 스크립트에 의해 적용됩니다) 내 CSS입니다 시도했습니다.

p:nth-child(1) {animation-delay:2s} 
p:nth-child(2) {animation-delay:3s} 
p:nth-child(3) {animation-delay:4s} 

그러나 작동하지 않습니다. 불행히도 내가 뭘 잘못했는지 모르겠다./

Answer 1

글쎄, 먼저 단락에 애니메이션을 적용해야한다. 애니메이션은 상속받지 않는다는 것을 항상 기억하십시오. 둘째, 웹킷 접두어를 잊지 마세요! 그것은 고통이지만 webkit 브라우저는 모든 애니메이션 속성과 키 프레임 정의보다 -webkit-이 여전히 필요합니다. Chrome, Safari, Android 등에서 애니메이션이 작동하지 않습니다 (접두사가 필요한지 기억하지 못하는 경우 caniuse.com http://caniuse.com/#feat=css-animation)

또한 원하는 경우 숨겨지기 위해 불투명도를 0으로 정의한 다음 '애니메이션 채우기 모드'를 전달으로 설정하여 애니메이션이 끝난 후 '대상'프레임의 속성이 그대로 유지되도록해야합니다.

작업 예제로 약간의 JS 피들을 만들었습니다. 도움이되기를 바랍니다! 충전 모드 설정 및 시작 불투명도 단락인가 애니메이션 & : 여기

http://jsfiddle.net/Ashwell/HqBZU/

은 중요한 비트이다.

.aside-check > p{ 
    animation: fadein 2s; 
    -webkit-animation: fadein 2s; 
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    opacity: 0; 
} 

는 또한 웹킷 키 프레임

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

이 필요합니다 그리고 존경 지연 시간 n 번째 자식 선택기의 각 -webkit-animation-delay: 2s;를 추가하는 것을 잊지 마세요!

이 답변이 너무 늦지 않기를 바랍니다.