Как сохранить эффект анимации CSS?

Question

У меня есть слайд анимация в CSS. Есть ли шанс сохранить этот эффект?

#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

Я предполагаю, что вы хотите, чтобы элемент скользил при наведении и выскальзывал, когда мышь уходит?Я предлагаю поместить: hover в родительский элемент:

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

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

В зависимости от того, что является родительским элементом, вам может понадобиться обернуть элемент #arch в <div>.

. Такжевам может потребоваться использовать CSS-переходы вместо CSS-анимаций, чтобы анимация не заканчивалась внезапно при наведении мыши:

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

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

(не забудьте включить другие варианты свойства для другихбраузеры)

Answer 2

Удалите событие :hover и оставьте его.