【微信小程序】实现图片的放大、缩小动画

一、首先在wxml文件中写一个图片的存放位置：

<image src="/images/heart_scale.png" class="heart"/> // src是图片路径，可自己更改

二、最后设置一下图片的样式以及动画：

@[keyframes]中的关键帧参数可根据需要进行修改

.heart {
  animation-name: scaleDraw; /*关键帧名称*/
  animation-timing-function: ease-in-out; /*动画的速度曲线*/
  animation-iteration-count: infinite; /*动画播放的次数*/
  animation-duration: 2s; /*动画所花费的时间*/
}
@keyframes scaleDraw {
  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(1); /*开始为原始大小*/
  }
  25% {
    transform: scale(1.05); /*放大1.1倍*/
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.05);
  }
}

转载自：https://blog.csdn.net/qq_58800537/article/details/132122552