如何防止页面加载时的CSS动画？

Question

我有一个动画，它负责处理按钮悬停状态的淡入淡出过渡效果。

问题在于默认动画（-webkit-animation: off-state 1s;）在页面加载时触发。怎么才能让它仅在第一次悬停状态后生效呢？

我知道怎样使用CSS过渡来实现这一点。但我正在寻找通过动画/关键帧进行解决的方案。 HTML

<div class="button"></div>

CSS

.button { background: #000; width: 20px; height: 20px; -webkit-animation: off-state 1s; }
.button:hover { -webkit-animation: on-state 1s; }

@-webkit-keyframes on-state {
  0% { height: 20px; }
  100% { height: 100px; }
}

@-webkit-keyframes off-state {
  0% { height: 100px; }
  100% { height: 20px; }
}

Demo

- Gajus

---

使用一点点JavaScript在悬停时添加一个类。 - Zach Saucier

@Zeaklous 这不可能仅通过 CSS 实现吗？ - Gajus

不行，除非你的意思是像这样。目前没有纯CSS添加类的方法。 - Zach Saucier

@Zeaklous，那是使用转换效果，但不幸的是它们不像动画那样灵活。 - Gajus

同意，我完全明白。就像我上面说的，没有办法使用纯CSS添加类。我仍然不清楚你在这里的最终目标是什么，你能提供一个可工作的js版本吗？ - Zach Saucier

下面的答案符合我的要求。 - Gajus

Answer 1

如@Zeaklous所建议的那样，可以使用JavaScript完成这个任务，例如使用jQuery：

$('.button').one('mouseout', function () { $(this).addClass('alt-animation'); });

将 animation 规则移动到 .alt-animation 类中：

.button { background: #000; width: 20px; height: 20px; }
.button.alt-animation { -webkit-animation: off-state 1s; }
.button:hover { -webkit-animation: on-state 1s; }

理想情况下，应该有仅基于CSS的替代方案。

- Gajus