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

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

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

1 个答案: