CSS3의 동일한 요소에 애니메이션을 연결할 수 있습니까?

Question

CSS3에서 회전하고 오른쪽에서 왼쪽으로 이동하려는 이미지가 있습니다. 잠시 후 새로운 현재 상태에서 이미지를 옮겨서 컨테이너에서 사라지기를 원합니다.

키 프레임과 일부 jQuery를 사용하여 첫 번째 애니메이션을 쉽게 만들 수 있지만 두 번째 애니메이션을 추가하려고 할 때마다 이미지가 초기 상태로 돌아오고 두 번째 애니메이션이 실행됩니다. 여기에 내가 예,이 같은 요소에 체인 애니메이션 가능하다 지금까지

@-webkit-keyframes image-slide-right-to-left { 
    0% { opacity: 1; } 
100% { opacity: 1; -webkit-transform: translate(-400px, 60px) rotate(-55deg);} 
} 

@-webkit-keyframes image-slide-up-and-out { 
     0% { opacity: 1; } 
     100% { opacity: 1; -webkit-transform: translate(400px, 260px) rotate(-55deg);} 
    } 

.image-slide-right-to-left{ 
     -webkit-animation: image-slide-right-to-left 3s, image-slide-up-and-out 3s; 
     -moz-animation: image-slide-right-to-left 3s, image-slide-up-and-out 3s; 
     -ms-animation:  image-slide-right-to-left 3s, image-slide-up-and-out 3s; 

     -webkit-animation-fill-mode: forwards; 
     -moz-animation-fill-mode: forwards; 
     -ms-animation-fill-mode: forwards; 

     -webkit-animation-delay: 4s, 8s; 
     -moz-animation-delay: 4s, 8s; 
     -ms-animation-delay: 4s, 8s; 

     animation-timing-function: ease-in-out; 
    } 

<script> 
    $(window).load(function() { 
     $('.feature1 .implant').addClass('image-slide-right-to-left'); 
</script> 

Answer 1

이 무엇 :

예 :

.animate-this { 
    -webkit-animation: 
     first-animation 2s infinite, 
     another-animation 1s; 
} 

Mr. Google에서 간단한 검색!

당신은 chained animated되는 일부 요소에 animations syntax here!

에 대해 fellow Stacker!

좋은 예에서 기사를 좋은 튜토리얼을 읽을 수 있습니다.

---

는 사업부가 배경으로 설정 애니메이션 GIF와 애니메이션을 함께

추가 된 simple Fiddle example을 편집했다.

Answer 2

나는 찾고 있던 해결책이있다. 아니 그 경우 가장 좋은 방법은 확실하지만, 여기에는 지정 "지연을 시작"할 수 어쨌든

<cfsavecontent variable="tempHeadCode"> 
<style type="text/css"> 
    sup{font-size:0.5em;} 

    #featureAnimation { 
     height: 350px; 
     overflow: hidden; 
     position: relative; 
     margin: 0 0 -30px -96px; 
     width: 960px; 
     color:#434343;   
    } 

    .feature1 .title { 
     position: absolute; 
     top: 20px; 
     left: 5%; 
     font-size:3em; 
     line-height:.8em;  
     letter-spacing:-2px; 
     word-spacing:-1px; 
    } 

    .feature1 .title2 { 
     position: absolute; 
     top: 150px; 
     left: 5%; 
     font-size:2em; 
     line-height:.8em;  
     letter-spacing:-2px; 
     word-spacing:-1px; 
    } 

    .feature1 .copy { 
     position: absolute; 
     bottom: 0px; 
     right: 5%; 
     font-size:1.4em; 
     width:30%; 
     opacity:0; 
    } 

    .implant{ 
     position: absolute; 
     right: 1%; 
     bottom: 0; 
    } 


    .image-slide-right-to-left{ 

     transform: translate(-400px, 70px) rotate(-60deg); 
     -ms-transform: translate(-400px, 70px) rotate(-60deg); 
     -moz-transform: translate(-400px, 70px) rotate(-60deg); 
     -o-transform: translate(-400px, 70px) rotate(-60deg); 
     -webkit-transform: translate(-400px, 70px) rotate(-60deg); 

     transition-delay: 2s; 
     -ms-transition-delay: 2s; 
     -moz-transition-delay: 2s;   
     -o-transition-delay: 2s; 
     -webkit-transition-delay: 2s; 

     transition-timing-function: ease-in-out; 
     -ms-transition-timing-function: ease-in-out; 
     -moz-transition-timing-function: ease-in-out; 
     -webkit-transition-timing-function: ease-in-out; 
     -o-transition-timing-function: ease-in-out; 

     transition-duration: 2s; 
     -ms-transition-duration: 2s; 
     -moz-transition-duration: 2s; 
     -webkit-transition-duration: 2s; 
     -o-transition-duration: 2s; 
    }  

    .title-fly-out-top-left{ 

     -transform: translate(-200px, -200px) rotate(0deg); 
     -moz-transform: translate(-200px, -200px) rotate(0deg); 
     -ms-transform: translate(-200px, -200px) rotate(0deg); 
     -o-transform: translate(-200px, -200px) rotate(0deg); 
     -webkit-transform: translate(-200px, -200px) rotate(0deg); 

     transition-delay: 2s; 
     -ms-transition-delay: 2s; 
     -moz-transition-delay: 2s;   
     -o-transition-delay: 2s; 
     -webkit-transition-delay: 2s; 

     transition-timing-function: ease-in-out; 
     -ms-transition-timing-function: ease-in-out; 
     -moz-transition-timing-function: ease-in-out; 
     -webkit-transition-timing-function: ease-in-out; 
     -o-transition-timing-function: ease-in-out; 

     transition-duration: 3s; 
     -ms-transition-duration: 3s; 
     -moz-transition-duration: 3s; 
     -webkit-transition-duration: 3s; 
     -o-transition-duration: 3s; 

     opacity: 0; 
    } 

    .sub-title-fly-out-left{   

     -transform: translate(-400px, 0px) rotate(-10deg); 
     -moz-transform: translate(-400px, 0px) rotate(-10deg); 
     -ms-transform: translate(-400px, 0px) rotate(-10deg); 
     -o-transform: translate(-400px, 0px) rotate(-10deg); 
     -webkit-transform: translate(-400px, 0px) rotate(-10deg); 

     transition-delay: 2s; 
     -ms-transition-delay: 2s; 
     -moz-transition-delay: 2s;   
     -o-transition-delay: 2s; 
     -webkit-transition-delay: 2s;   

     transition-duration: 2.5s; 
     -ms-transition-duration: 2.5s; 
     -moz-transition-duration: 2.5s; 
     -webkit-transition-duration: 2.5s; 
     -o-transition-duration: 2.5s; 

     transition-timing-function: ease-in-out; 
     -ms-transition-timing-function: ease-in-out; 
     -moz-transition-timing-function: ease-in-out; 
     -webkit-transition-timing-function: ease-in-out; 
     -o-transition-timing-function: ease-in-out; 

     opacity: 0; 
    } 

    .image-slide-down-and-out{ 

     transform: translate(-400px, 450px) rotate(-60deg); 
     -ms-transform: translate(-400px, 450px) rotate(-60deg); 
     -moz-transform: translate(-400px, 450px) rotate(-60deg); 
     -o-transform: translate(-400px, 450px) rotate(-60deg); 
     -webkit-transform: translate(-450px, 400px) rotate(-60deg); 

     transition-delay: 6s; 
     -ms-transition-delay: 6s; 
     -moz-transition-delay: 6s;   
     -o-transition-delay: 6s; 
     -webkit-transition-delay: 6s; 

     transition-duration: 3s; 
     -ms-transition-duration: 3s; 
     -moz-transition-duration: 3s; 
     -webkit-transition-duration: 3s; 
     -o-transition-duration: 3s; 

     transition-timing-function: ease-in-out; 
     -ms-transition-timing-function: ease-in-out; 
     -moz-transition-timing-function: ease-in-out; 
     -webkit-transition-timing-function: ease-in-out; 
     -o-transition-timing-function: ease-in-out; 

     opacity: 0; 
    } 

    .copy-fade-in-bottom-mid { 

     -transform: translate(0px, -100px) rotate(0deg); 
     -moz-transform: translate(0px, -100px) rotate(0deg); 
     -ms-transform: translate(0px, -100px) rotate(0deg); 
     -o-transform: translate(0px, -100px) rotate(0deg); 
     -webkit-transform: translate(0px, -100px) rotate(0deg); 

     transition-delay: 3s; 
     -ms-transition-delay: 3s; 
     -moz-transition-delay: 3s;   
     -o-transition-delay: 3s; 
     -webkit-transition-delay: 3s; 

     transition-duration: 3s; 
     -ms-transition-duration: 3s; 
     -moz-transition-duration: 3s; 
     -webkit-transition-duration: 3s; 
     -o-transition-duration: 3s; 

     transition-timing-function: ease-in-out; 
     -ms-transition-timing-function: ease-in-out; 
     -moz-transition-timing-function: ease-in-out; 
     -webkit-transition-timing-function: ease-in-out; 
     -o-transition-timing-function: ease-in-out; 

     opacity: 1 !important; 
     display:block; 
    } 

    .copy-fade-out-mid-top { 

     transform: translate(0px, -400px) rotate(0deg); 
     -moz-transform: translate(0px, -400px) rotate(0deg); 
     -ms-transform: translate(0px, -400px) rotate(0deg); 
     -o-transform: translate(0px, -400px) rotate(0deg); 
     -webkit-transform: translate(0px, -400px) rotate(0deg); 

     transition-delay: 6s; 
     -ms-transition-delay: 6s; 
     -moz-transition-delay: 6s;   
     -o-transition-delay: 6s; 
     -webkit-transition-delay: 6s; 

     transition-duration: 2s; 
     -ms-transition-duration: 2s; 
     -moz-transition-duration: 2s; 
     -webkit-transition-duration: 2s; 
     -o-transition-duration: 2s; 

     transition-timing-function: ease-in-out; 
     -ms-transition-timing-function: ease-in-out; 
     -moz-transition-timing-function: ease-in-out; 
     -webkit-transition-timing-function: ease-in-out; 
     -o-transition-timing-function: ease-in-out; 

     opacity: 0; 
    } 

</style> 

<script> 
    $(window).load(function() { 

     $('.feature1 .title').addClass('title-fly-out-top-left'); 
     $('.feature1 .title2').addClass('sub-title-fly-out-left'); 


     $('.feature1 img').addClass('image-slide-right-to-left').bind("webkitTransitionEnd", function() { 
      $(this).addClass('image-slide-down-and-out'); 
      $('.feature1 .copy').addClass('copy-fade-out-mid-top'); 
     }); 

     $('.feature1 .copy').addClass('copy-fade-in-bottom-mid').bind("webkitTransitionEnd", function() { 
      $(this).addClass('copy-fade-out-mid-top');    
     }); 
    }); 
</script> 

</cfsavecontent> 
<cfhtmlhead text="#tempHeadCode#"> 

<div id="featureAnimation"> 
<div class="feature1"> 
    <cfoutput> 
     <img src="#attributes.imageDirectory#/01implant.png" class="implant"  /> 
     <p class="title">Blah blah blah</p> 
     <p class="title2">Blah blah blah</p> 
     <p class="copy">Blah blah blah</p> 
    </cfoutput> 
</div>