How to stop Keyframe Animation after users login?-CodePudding

I added keyframe animation to my login icon. Its purpose is to attract the attention of unregistered users. But I want the keyframe animation to stop once users log in to the site. The idea is only to work when ghosts/non-register users visit the site.

That's the code i've used in my style.css. My site is running on Wordpress.

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

I will hope for a detailed explanation of how to do it. Which files will I need to edit with correct element for me. I guess i will need to add additional code to my style.css and maybe some javascript too?

CodePudding user response：

Assign this animation to a className. Define this class for the tag Once the user login, delete that class with JavaScript

html:

<tag-name >..</tag-name>

css:

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

javascript (run after login):

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

CodePudding user response：

You can add

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

in your javascript after the user logs in.

Or if you want to use css only:

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

To pause your animation.

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