Question

I have some slide animation in css. There is any chance to keep this effect?

#arch{
    margin-top:5%;
    width:222px;
    height:222px;
    background-image:url(img/arch.jpg);
    box-shadow:0px 0px 3px #000000;

    }

#arch:hover{
        -webkit-animation:przesuniecie 1s 1 alternate;
        }

@-webkit-keyframes przesuniecie
{
from {width:222px;}
to {width:0px;}
}

Answer 1

I m guessing you mean to have to the element slide away on hover, and slide out when the mouse leaves? I suggest putting the :hover on the parent element:

*:hover > #arch{
    -webkit-animation:przesuniecie 1s 1 alternate;
}

@-webkit-keyframes przesuniecie
{
    from {width:222px;}
    to {width:0px;}
}

根据母要素,你可能需要在<代码><div>中填列分数。

Also, you may need to use CSS transitions instead of CSS animations, so that the animation doesn t abruptly end on mouseout:

#arch{
    -webkit-transition:width 1s;
    width: 220px;
}

*:hover > #arch{
    width: 0;
}

(Don t forget to include the other variations of the property for the other browsers)

Answer 2

删除<代码>:hover 活动,让它坐下来。

友情链接