如何保持css动画效果？

我在CSS中有一些幻灯片动画。有没有机会保持这种效果？如何保持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;} 
}

来源

2012-01-15 Błażej

我猜你的意思是不得不将元素滑过悬停，并在鼠标离开时滑出？我建议把：父元素上悬停：

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

（不要忘了，包括财产的其他变化对于其他浏览器）

来源

2012-01-15 22:33:32 Brilliand

删除:hover事件，让它坐下。

来源

2012-01-15 22:12:40

是的，但我希望animat goeas指向div后。顺便说一句。删除悬停并不能帮助所有它仍然回到222px aftre动画。 – 2012-01-15 22:14:04

@Dudi即时混淆，你想保持动画，但保持'：悬停'事件呢？你究竟想要保持什么？ – 2012-01-15 22:15:19

@Ander Ilich我想滑动平铺，然后阅读该平铺下的文字。 – 2012-01-15 22:20:52

如何保持css动画效果？

回答

相关问题