我想知道如何使div悬停在其上时播放CSS动画,以及当鼠标停止悬停在其上时如何使其向后播放动画。我已经有动画,可以使用方便的在线CSS关键帧动画生成器程序生成。
.element-animation{
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
}
@-webkit-keyframes animationFrames {
0% {
left:0px;
top:0px;
opacity:1;
-webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ;
}
20% {
-webkit-transform: rotate(60deg) ;
}
40% {
-webkit-transform: rotate(40deg) ;
}
60% {
-webkit-transform: rotate(54deg) ;
}
80% {
-webkit-transform: rotate(42deg) ;
}
100% {
left:0px;
top:0px;
opacity:1;
-webkit-transform: rotate(46deg) scaleX(1) scaleY(1) ;
}
}
所有帮助,不胜感激!
最佳答案
将:hover
像这样添加到CSS类element-animation:hover
检查小提琴http://jsfiddle.net/PawelK/SF4Zy/3/已通过Chrome测试
关于css - div悬停时动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22760900/