使用css动画animation及@keyframes实现图片持续放大缩小动画展示

 css样式

.img {
      width: 60px;
      height: 60px;
      padding: 10px;
      box-sizing: border-box;
      background: #fff;
      border-radius: 50px;
      box-shadow: 0px 0px 4px 1px rgba(196, 178, 177, 0.5),
        0px 0px 8px 2px rgba(186, 177, 196, 0.5) inset;


      img {
        width: 100%;
        height: 100%;
        animation-name: scaleDraw;
        /*关键帧名称*/
        animation-timing-function: ease-in-out;
        /*动画的速度曲线*/
        animation-iteration-count: infinite;
        /*动画播放的次数*/
        animation-duration: 3s;
        /*动画所花费的时间*/
      }
    }

@keyframes scaleDraw {

  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(1);
    /*开始为原始大小*/
  }

  25% {
    transform: scale(1.1);
    /*放大1.1倍*/
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.1);
  }
}