效果

需求

背景

由于最近自家小程序用户活跃用户下滑，老板看看自家小程序，发现分享按钮不够明显，于是乎有了下面这段对话。

老板：小明，你过来下，看看这个分享按钮不明显
小明：好的，给它点颜色瞧瞧

小明给按钮来了个红色，发给了BOSS

BOSS：还是不明显
小明：好的，给它点放大瞧瞧

小明把按钮从原来的60rpx放大到了230rpx，发给了BOSS

BOSS：还是不明显
小明：好的，让它动起来！

需求：提高分享率，做个扩散动画效果让这个按钮成为整个页面最靓的仔。

思路分析：

1. 从小到大的变化
2. 从颜色从深到浅
3. 反复进行该动作

动画代码

实用 CSS3 的 animation 属性

代码

.share-btn {
  width: 200rpx;
  height: 200rpx;
}
.share-btn::before {
  // 省略无关代码
  animation: wave 1.5s ease-out infinite;
}

[@keyframes](/user/keyframes) wave {
  50%, 75% {
    width: 230rpx;
    height: 230rpx;
  }

  80%, 100% {
    opacity: 0;
  }
}

分析

我们先来看看 animation 参数：
animation: wave 1.5s ease-out infinite;
animation: 关键帧名称 动画时长 动画形式 播放次数;
ease-out：动画以低速结束
infinite：无限次播放

从参数可以得出来使用了wave这个关键帧参数，1.5完成一次扩散的动画，从快到满的速度，无限重复这个动画。

然后我们再来看看 keyframes 参数：
百分比：动画持续时间的百分比。
属性：CSS样式属性

从参数可以得出来

1. 时间 50%->75% 的时候就会改变大小从200rpx-230rpx。
2. 时间 80%->100% 的时候会改变透明度从0-1。

第一步：原始大小（高度：200，宽度：200，透明度：1）

第二步：改变大小（高度：230，宽度：230，透明度：1）

第三步：改变透明度（高度：230，宽度：230，透明度：0）

第四步：回到第一步

总结

做动画先分析步骤，然后设置 animation 参数。如果你觉得CSS比较麻烦的话，还可以使用小程序提供 Animation 对象实现。

css3 的 animation 的所有参数不局限以上这些，了解更多点击传送门
Animation 对象，了解更多点击传送门