如何在页面加载时防止CSS动画？ [英] How to prevent CSS animation on page load?

问题描述

我有一个动画，它处理按钮悬停状态下的渐变和渐隐过渡。

I have an animation, which is taking care of the fading in and out transition on button hover state.

问题是，默认动画$ c> -webkit-animation：off-state 1s; ）在网页加载时触发。如何让它在第一个悬停状态后才有效？

The problem is that the default animation (-webkit-animation: off-state 1s;) is firing off on page load. How do I make it active only after first hover state?

我知道如何使用CSS转换实现这一点。 我正在使用动画/关键帧寻找解决方案。

I know how to achieve this using CSS transitions. I am looking for a solution using animation/keyframes.

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; }
}

演示

推荐答案

如@Zeaklous建议， JavaScript，例如使用jQuery：

As suggested by @Zeaklous, this can be done using JavaScript, e.g. using jQuery:

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

并将动画 c $ c> .alt-animation class：

and moving the animation rule to .alt-animation class:

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

理想情况下，应该只有CSS可选。

Ideally, there should be CSS only alternative.

这篇关于如何在页面加载时防止CSS动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！