将jquery动画转换为CSS3

Question

HTML:

 <div id="slick-slidetoggle">wxyz</div>           

            <div id="slickbox" >abcd</div>?

JS

//在DOM准备就绪后立即隐藏slickbox(页面加载稍快一点)

         var hoverVariable=false;
        var hoverVariable2=false;

        $('#slickbox').hide();
        $('#slick-slidetoggle').mouseover(function() {
            hoverVariable2=true;
            $('#slickbox').slideToggle(600);
            return false;
        })
        $('#slick-slidetoggle').mouseleave(function() {
            hoverVariable2=false;
            setTimeout(function (){
            if(!hoverVariable && !hoverVariable2){
            $('#slickbox').slideToggle(600);
            return false;}
         }, 1000);
        })
        $('#slickbox').mouseleave(function() {                    
            hoverVariable=false;
            setTimeout(function (){
            if(!hoverVariable && !hoverVariable2){                    
            $('#slickbox').slideToggle(600);
            return false;}
            return false;
           }, 1000); 
        })
        $('#slickbox').mouseover(function() {
             hoverVariable2=false;

            hoverVariable=true;

        })?

CSS

#slickbox {
    background: black;
    width:100px;
    height: 135px;
    display: none; 
    cursor:pointer;
    color:white;
}
#slick-slidetoggle{
 background: yellow;
    width:100px;
    height: 135px;
    cursor:pointer;
    color:black;

}

​

现在上面的功能是我想用纯CSS实现的,当我将鼠标悬停在"wxyz"按钮上时,"abcd"按钮应该下降并保持可见,即使鼠标从"wxyz"移开3秒.

我尝试了显示属性的转换延迟,但显然这对显示属性不起作用,然后我尝试了位置:绝对和可见性以及转换延迟的可见性,但是按钮的外观延迟了3秒而不是hidnig.我希望在使用CSS或CSS3将按钮从"wxyz"移开3秒后隐藏"abcd"按钮

Answer 1

这是一个示例（代码在这里）

（我只写了-webkit，但你可以添加其他前缀）

#test2 {
    position:absolute;
    z-index:1;
    background: black;
    width:100px;
    height: 135px;
    opacity: 0; 
    cursor:pointer;
    color:white;
    opacity:0;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
}

#test {
    position:absolute;
    z-index:2;
    background: yellow;
    width:100px;
    height: 135px;
    cursor:pointer;
    color:black;

}
.container {
  position:relative;
}

.container:hover #test2 {
  opacity:1;
  -webkit-animation-name: slideDown;
}

.container:not(:hover) > #test2 {
  -webkit-animation-delay:1000ms;
  -webkit-animation-name: slideUp;
  opacity:1;
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(0);
    } 
    100% {
        -webkit-transform: translateY(135px);
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(135px);
    } 
    100% {
        -webkit-transform: translateY(0);
    }
}