How to properly add an animation to the login icon?-CodePudding

First, I want to apologize for the lack of knowledge on this matter.

I'm trying to add an animation to the login icon to catch the eye of users signing up. But I can't write the code correctly for the animation to work. And most of all, I would like this animation to run when users are logged-out.

That's what i've tried in style.css, but maybe everything is incorrect. I will ask for correct coding.

.menu-item i._mi .dashicons .dashicons-download {
    animation-name: dashicons-download;
    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;
    }
}

Image sample of my site.

CodePudding user response：

Actually, your code works. I've just replaced the selector (see the snippet).

So, I would check selector .menu-item i._mi .dashicons .dashicons-download once again.

.animated-elem {
  width: 30px;
  height: 30px;
  background: #ccc;
}
.animated-elem {
    animation-name: dashicons-download;
    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;
    }
}

<div >
  <div ></div>
</div>

CodePudding user response：

If you want run this animation only user logouted site follow this methods.

Methods:

First change element 's animation-name property
Second Add animatedly class to element.

First method

const login_body =  document.querySelector('.login__body');

const status  = document.querySelector('.status');

function logout(){
   login_body.style.animationName = "logout";
   login_body.textContent = "You are Logout.";
   status.textContent = "Logout successfully complete(animation-name changed.)";
}

setTimeout(logout, 5000);

.login__body{
  background: blue;
  display: inline-block;
  padding: 20px;
  color: white;
  animation-name: ;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes logout {
    0% {
        box-shadow: 0px 0px 3px red;
    }
    50% {
        box-shadow: 0px 0px 10px red;
    }
    100% {
        box-shadow: 0px 0px 3px red;
    }
}

<div >
You are logged
</div>
<hr>
<p >
You are automatically logout to site 5 seconds left.
</p>

Second method

const login_body =  document.querySelector('.login__body');

const status  = document.querySelector('.status');


function add_logout_class(){
  login_body.classList.add("logout")
  status.textContent = ".logout class successfully added to .login__body class.";
  login_body.textContent = "Login";
}

setTimeout(add_logout_class, 5000);

.logout{
  background: blue;
  display: inline-block;
  padding: 20px;
  color: white;
  animation-name: logout;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes logout {
    0% {
        box-shadow: 0px 0px 3px red;
        transform: rotateZ(3deg);
    }
    50% {
        box-shadow: 0px 0px 10px red;
        transform: rotateZ(-3deg);
    }
    100% {
        box-shadow: 0px 0px 3px red;
        transform: rotateZ(3deg);
    }
}

<div >
Wait. . . 
</div>
<hr>
<p >
.logut class automatically adding 5 seconds left.
</p>

These methods are based on my experience, there may be better solutions. Good Luck.