如何防止页面加载时出现 CSS 动画？答案

【问题标题】：How to prevent CSS animation on page load?如何防止页面加载时出现 CSS 动画？
【发布时间】：2013-11-02 01:27:54
【问题描述】：

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

问题是默认动画 (-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

【问题讨论】：

在悬停时使用一点点javascript添加一个类
@Zeaklous 单独使用 css 是不可能的吗？
不，除非您只是指like this。目前没有办法用纯CSS添加类
@Zeaklous 那是使用过渡，不幸的是它没有动画那么灵活。
同意，我完全意识到这一点。就像我上面说的，没有办法用纯 CSS 添加一个类。我仍然不清楚你的最终目标是什么，你能提供一个有效的 js 版本吗？

标签： css css-animations

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

【讨论】：