css - 如何防止页面加载时出现 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; }
}

演示

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