css - 启动时的 WebKit 动画

Question

我已经在 :hover 上设置了 WebKit 关键帧，元素正在按预期进行转换。当用户将鼠标光标从元素中移开时，应激活反向效果(基本上是 JS 中的 onmouseover 和 onmouseout)。

所以我创建了反向关键帧并将它们放在默认的 CSS 选择器中。问题是这些关键帧在页面加载时激活，但我只需要在您将鼠标从元素上移开时激活它们。

是否有一些其他属性需要设置，或者这只能通过 JS 实现吗？

编辑:这是 JSFiddle 测试用例(当然在 WebKit 中查看):http://jsfiddle.net/nkEwQ/

Answer 1

没有 JS:从 #button 中删除了 -webkit-animation-name:bouncedown;,
将其替换为 -webkit-transition: all .5s ease-in-out;
(无法获得漂亮的弹跳效果，但它会动画回到正方形) http://jsfiddle.net/SebastianPataneMasuelli/nkEwQ/7/

使用 JS我从 #button 中删除了动画，创建了一个处理 webkit 动画的类 (.active)，并使用 jQuery 在按钮鼠标悬停时添加了该类。

这样，#button 在加载时没有动画，但当用户将鼠标悬停在它上面时，动画声明会添加到它。

在这里查看:http://jsfiddle.net/SebastianPataneMasuelli/nkEwQ/5/