背景

前段时间需要实现一个水波纹扩散效果，大概效果就两点：波纹逐渐扩散，半径逐渐增大；透明度逐渐降低（如下图）。本以为这就是一个简单的动画，很轻松就实现了。但是发布之后测试同学反馈：在ios上，动画会闪烁。

经过我的观察（下图是闪烁时的效果），很明显是在动画结束后，opacity突然会变成1导致的（动画100%时opacity设为0）。我本来以为可能是动画结束后会先显示下初始状态导致的，但是经过我实验，如果我在动画初始状态设置一些明显的样式，结束后依然只会影响到opacity。

所以我得出结论，ios动画在opacity的变化上就是有bug（当然这个结论只是我粗略的实验得出的）。

解决办法

以下是我尝试过的一些办法，【3，4】为有效解决办法！！！

1. 我在动画100%处设置opacity：0的同时，再设置visibility： hidden。结果是无效。

2. 第二种办法是百度查到的方法，网上好像只提供了这一种方法，就是设置父元素overflow：hidden，然后在动画100%时将动画元素位移到父元素外。
   我尝试了以下，在保留原本波纹动画的基础上，又新增了一个动画，在99%-100%时将元素位移出屏幕，实际效果非常不好，也可能是我参数设置的不太好；

3. 用设置背景色 rgba 的方式替换opacity变化，这个方式应该是有效的，但是只适合背景是纯色的场景，因为我这个波纹是渐变色的，所以这个方法也pass；

4. 第四种办法是我的最终解决方案，那就是在动画0%时opacity也设为0，然后再将透明度增加到1，类似于动画延迟的效果。最终效果还不错。下面是我的波纹动画：

@keyframes songbo {
  0%{
    opacity: 0;
    width: 0;
    height: 0;
  }
  10%{
    opacity: .2;
    width: 340rpx;
    height: 340rpx;
  }
  to{
    opacity: 0;
    width: 980rpx;
    height: 980rpx;
  }
}