純粹的CSS3動畫：2部分動畫，一個接一個

Question

我想用2部分做一個css3圖標動畫：第二個必須從第一個完成時（該部分工作）開始，並在鼠標出，第二部分應該在第一部分完成之前完成（這是問題，它不這樣做）。請have a look here。

HTML：

<div class="iconsArea"> 
    <div class="icon green"> 
     <div class="megafono"> 
     <div><!-- megafono --></div> 
     </div> 
     <div class="wave"> 
     <div><!-- wave --></div> 
     </div> 
    </div> 
</div> 

CSS

.icon{ 
    width: 126.5px; 
    height: 126.5px; 
    -moz-border-radius: 70px; 
    -webkit-border-radius: 70px; 
    border-radius: 70px; 
    position: relative; 
} 

.green{ 
    background: #7ec247; 
} 

/* MEGAFONO STARTS */ 

/* initial state */ 
div.megafono { 
    position: absolute; 
    bottom: 22px; 
    left: 18px; 
    -webkit-transition: all 1s ease-in; 
    -moz-transition: all 1s ease-in; 
    -o-transition: all 1s ease-in; 
    transition: all 1s ease-in; 
} 

div.megafono div { 
    width: 82px; 
    height: 79px; 
    background: url(../img/microfono.png) no-repeat; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 


/* hover final state */ 
.icon:hover div.megafono { 
    -webkit-transform: translate(-5px, 10px); 
    -moz-transform: translate(-5px, 10px); 
    -o-transform: translate(-5px, 10px); 
    -ms-transform: translate(-5px, 10px); 
    transform: translate(-5px, 10px); 
    animation-delay: 0s, 2s; 
    -moz-animation-delay: 0s, 2s; 
    -webkit-animation-delay: 0s, 2s; 
    -o-animation-delay: 0s, 2s; 
} 
.icon:hover div.megafono div { 
    -webkit-transform: rotate(-45eg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

/* MEGAFONO ENDS */  


    /* WAVE STARTS */ 

/* initial state */ 
div.wave { 
    position: absolute; 
    top: 10px; 
    right: 20px; 
    -webkit-transform: rotate(-45eg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-opacity: 0; 
    -moz-opacity: 0; 
    opacity: 0; 
    transition-delay: 1s, 0s; 
    -webkit-transition-delay: 1s, 0s; /* Safari */ 

} 

div.wave div { 
    width: 24px; 
    height: 43px; 
    background: url(../img/wave.png) no-repeat; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 


/* hover final state */ 
.icon:hover div.wave { 
    -webkit-opacity: 1; 
    -moz-opacity: 1; 
    opacity: 1; 
} 


/* WAVE ENDS */ 

建議糾正它嗎？

Answer 1

你的設置是那種混淆，所以我改變了你的HTML一點

<div class="iconsArea"> 
    <div class="icon green"> 
     <div class="megafono"> 
      <!-- megafono --> 
     </div> 
     <div class="wave"> 
      <!-- wave --> 
     </div> 
    </div> 
</div> 

爲了獲得延遲的差別，你應該聲明要在:hover和延遲第一時間延遲你想第二次在元素的屬性中。這可能看起來倒退了，但是你必須記住，只要元素被徘徊，屬性就會影響它。其結果是，下面就是你要找的，我相信（前綴可讀性刪除）成果

/* initial state */ 
div.megafono { 
    position: absolute; 
    bottom: 22px; 
    left: 18px; 
    width: 82px; 
    height: 79px; 
    background: url(../img/microfono.png) no-repeat; 
    z-index:1; 
    transition:all 1s ease-in-out; 
    transition-delay: 1s; 
} 
/* hover final state */ 
.icon:hover div.megafono { 
    transform: rotate(-45deg) translateX(-25px);  
    transition-delay: 0s; 
} 
/* MEGAFONO ENDS */ 

/* WAVE STARTS */  
/* initial state */ 
div.wave { 
    position: absolute; 
    top:50%; left:50px; 
    width: 24px; height: 43px; 
    margin-left:-12px; margin-top:-22px; 
    background: url(../img/wave.png) no-repeat; 
    transform: rotate(-45deg); 
    transition:all 1s ease-in-out; 
    transition-delay: 0s; 
} 
.icon:hover div.wave { 
    transform: rotate(-45deg) translateY(10px) translateX(45px); 
    transition-delay: 1s; 
} 

Demo