如何在页面加载时阻止CSS动画？

Question

我有一个动画,它负责按钮悬停状态下的淡入和淡出过渡.

问题是默认的animation(-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; }
}

演示

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 替代方案。