연쇄 CSS3 애니메이션

Question

나는 간단한 질문이있다 (나는 생각한다).

같은 체인 CSS3 애니메이션에 어떤 방법이 있나요 :이 경우

#element { animation: fadeIn 5s 0s linear, fadeOut 5s 25s linear ; } 

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

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

, 나는 내가 다른 지연과 fadingIn 및 fadingOut 다른 요소 수 생각합니다. 고마워, Lionel

Answer 1

예, 0 %, 25 % 등의 증가분을 사용하고 전체 애니메이션을 연결할 수 있습니다.

this fiddle을 살펴보십시오.

내가 한 일은 incremenets을 사용하여 애니메이션을 하나의 커다란 체인으로 만드는 것입니다.

@-webkit-keyframes move { 
0% {top: 100px; 
     left: 100px; 
     -webkit-transform: rotate(135deg);} 
25% {top: 250px; 
     left: 250px; 
     -webkit-transform: rotate(135deg);} 
50% {top: 100px; 
     left: 250px; 
     -webkit-transform: rotate(0deg);} 
75% {top: 250px; 
     left: 100px; 
     -webkit-transform: rotate(-135deg);} 
100% {top: 100px; 
     left: 100px; 
     -webkit-transform: rotate(0deg);} 
} 

은 % 타이밍 애니메이션 해당 오브젝트 및 페이드 아웃 그래서, 교체 다만 따라서 그 비율을 변경한다 멈춘다.