jquery – 如何在页面加载时在图像上创建脉冲效果几秒钟？

我试图在图像上创建脉冲效果,但到目前为止它还没有工作.我试过一个span元素,它的工作原理如下：

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,0.4);
  }
  70% {
      -webkit-Box-shadow: 0 0 0 10px rgba(204,0);
  }
  100% {
      -webkit-Box-shadow: 0 0 0 0 rgba(204,0);
  }
}
@keyframes pulse {
  0% {
    -moz-Box-shadow: 0 0 0 0 rgba(204,0.4);
    Box-shadow: 0 0 0 0 rgba(204,0.4);
  }
  70% {
      -moz-Box-shadow: 0 0 0 10px rgba(204,0);
      Box-shadow: 0 0 0 10px rgba(204,0);
  }
  100% {
      -moz-Box-shadow: 0 0 0 0 rgba(204,0);
      Box-shadow: 0 0 0 0 rgba(204,0);
  }
}

我想和这张图片一样：

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

当页面加载时,图像应具有脉冲效果或仅使图像稍微大一点2秒以指示交互性,然后图像应保持其原始形状.

有什么建议？

我创建了这支笔：https://codepen.io/maketroli/pen/ZyOJYM

编辑

我需要在黄色圆圈下方的图像中创建相同的效果.从跨度制成的黄色圆圈正在按照下图所示实现我想要达到的效果.

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

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