css - 纯CSS3动画: 2 parts animation,一个接一个

Question

我正在尝试制作一个包含两部分的 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