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;}
}

Depending on what the parent element is, you may need to wrap the #arch element in a <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)