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

纯CSS3动画：2部分动画，一个接一个

1 个答案: