我创建了一个简单的反弹动画,我正在应用于:hover状态的元素:
- @keyframes bounce {
- 0% {
- top: 0;
- animation-timing-function: ease-out;
- }
- 17% {
- top: 15px;
- animation-timing-function: ease-in;
- }
- 34% {
- top: 0;
- animation-timing-function: ease-out;
- }
- 51% {
- top: 8px;
- animation-timing-function: ease-in;
- }
- 68% {
- top: 0px;
- animation-timing-function: ease-out;
- }
- 85% {
- top: 3px;
- animation-timing-function: ease-in;
- }
- 100% {
- top: 0;
- }
- }
- .Box:hover {
- animation: bounce 1s;
- }
动画效果很好,除了当您将光标从元素中删除后,它会突然停止。有没有强制它继续设定的迭代次数即使鼠标已经退出?基本上我在这里寻找的是由:悬停状态触发的动画。我不是在寻找一个javascript解决方案。我没有看到这样做的规格,但也许有一个明显的解决方案,我错过了这里?
这是一个小提琴玩:http://jsfiddle.net/dwick/vFtfF/