纯 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中声明你第一次想要的延迟，第二次在元素的属性中声明你想要的延迟。这可能看起来倒退，但您必须记住，一旦元素悬停，: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