有动画示例：
.b-ball_bounce {transform-origin: top;}
@-webkit-keyframes ball_animation {
20% {transform: rotate(-9deg);}
40% {transform: rotate(6deg);}
60% {transform: rotate(-3deg);}
80% {transform: rotate(1.5deg);}
100% {transform: rotate(0deg);}
}
.b-ball_bounce:hover {
-webkit-animation: ball_animation 1.5s;
animation-iteration-count: 1;
}
当鼠标悬停在元素上时动画开始。但是当鼠标离开时，动画立即停止。但我想在鼠标离开后完成动画。
这是 JavaScript 帮助下的示例：http://codepen.io/Profesor08/pen/pvbzjX我想对纯 CSS3 做同样的事情，现在看起来是这样的：http://codepen.io/Profesor08/pen/WbxeoW
你可以通过转换做很多事情：
#some-div {
background-color: rgba(100,100,0,0.2);
transition: background-color 0.5s ease;
}
#some-div:hover { background-color: rgba(100,0,0,0.7); }
看着那（这JSfiddle或者看here了解更多
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
