I want to add Animation to my Wordpress's icon?-CodePudding

i'm using Wordpress with Menu icon plugin. I've change my Login with icon, but i want some effect on it. For example, like shadow pulse and things like that. But to add animation , do you need only 1 line of code to your css or u need additional script or something like that?

Check screenshot - https://prnt.sc/24b9a0u

I'm adding animation line, but nothing changes. I'sure I'm missing something.

CodePudding user response：

You will need to keyframes for the animation

below you will find a demo.

.pulse {
  margin:100px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}


@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

<span ></span>

CodePudding user response：

You can use the "animation" with "@keyframes" for anim some class or anything else in css (with WordPress or not) :

.class {
    animation-name: anime-name;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes anime-name {
    0% {
        box-shadow: 0px 0px 3px grey;
    }
    50% {
        box-shadow: 0px 0px 10px grey;
    }
    100% {
        box-shadow: 0px 0px 3px grey;
    }
}