css - 如何保持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;
}

(不要忘记包含其他浏览器属性的其他变体)