是否有可能將動畫鏈接到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一個簡單的搜索！

可以讀取一個很好的教程有關animations syntax here!

從fellow Stacker!

一個很好的例子物品，其中一些元素是chained animated。

---

EDITED

添加了一個與simple Fiddle example一個div被與動畫GIF設置爲背景動畫。

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>