用户登录后如何停止Keyframe Animation？

Question

我将关键帧 animation 添加到我的登录图标中。 其目的是吸引未注册用户的注意。 但我希望关键帧 animation 在用户登录该站点后停止。 这个想法只有在幽灵/非注册用户访问该站点时才有效。

这是我在我的风格中使用的代码。css

.menu-item-15097 .dashicons-download {
    animation-name: menu-item-15097;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes dashicons-download {
    0% {
        box-shadow: 0px 0px 3px grey;
    }
    50% {
        box-shadow: 0px 0px 10px grey;
    }
    100% {
        box-shadow: 0px 0px 3px grey;
    }
}

我希望详细说明如何做到这一点。 我需要使用正确的元素为我编辑哪些文件。 我想我需要在我的 style.css 和一些 javascript 中添加额外的代码？

Answer 1

将此 animation 分配给一个类名。 为标签定义此 class 用户登录后，使用 JavaScript 删除该 class

html：

<tag-name class="element_class animate_class">..</tag-name>

css：

.animate_class {
    animation-name: menu-item-15097;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

javascript（登录后运行）：

document.querySelector(".element_class").classList.remove("animate_class")

Answer 2

你可以加

/* element name */.style.animationPlayState = 'paused';

用户登录后在您的 javascript 中。

或者，如果您只想使用 css：

/* element selector */ {
    animation-play-state: paused
}

暂停您的 animation。

参考： https://css-tricks.com/how-to-play-and-pause-css-animations-with-css-custom-properties/