How to create a pulsed effect on the image in a few seconds when loading the page?

Question

I am trying to create a pulsed effect on the image, but it does not work yet. I tried the item spanand it works as follows:

HTML:

<span class="pulse"></span>

CSS

.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;
}
.pulse:hover {
  animation: none;
}

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

I want the same with this image:

<a href="javascript:void(0)" class="item">
  <img src="https://image.ibb.co/cNjXna/guided_inv_icon.png" alt="">
</a>

When the page loads, the image should have a pulsed effect, or just get the image a little longer for 2 seconds to indicate interactivity, and then the image should retain its original shape.

Any suggestions?

I created this pen: https://codepen.io/maketroli/pen/ZyOJYM

EDIT

I need to create the same effect on the image below the yellow circle. The yellow circle made of spandoes what I want to achieve with the image below.

Answer 1

, , span.

.item img{
animation: pulse 2s infinite;
}

pen

2 , , magnified.

@keyframes magnified{
0%{
transform: scale(1.2,1.2);
}
70%{
transform: scale(1.2,1.2);
}
100%{
transform: scale(1,1);
}
}

:

.item img{
animation: pulse 2s infinite, magnified 2s 1;
}

pen, .

Answer 2

HTML CSS3: keyframe css .

<span class="pulse"></span>

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

@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 30px rgba(204,169,44, 0);
      box-shadow: 0 0 0 30px 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);
  }
}


</style>