【bug记录】ios动画闪烁,@keyframe动画在100%的时候设置为opacity:0,最后一帧会变成opacity:1

背景

前段时间需要实现一个水波纹扩散效果,大概效果就两点:波纹逐渐扩散,半径逐渐增大;透明度逐渐降低(如下图)。本以为这就是一个简单的动画,很轻松就实现了。但是发布之后测试同学反馈:在ios上,动画会闪烁。
【bug记录】ios动画闪烁,@keyframe动画在100%的时候设置为opacity:0,最后一帧会变成opacity:1_第1张图片
经过我的观察(下图是闪烁时的效果),很明显是在动画结束后,opacity突然会变成1导致的(动画100%时opacity设为0)。我本来以为可能是动画结束后会先显示下初始状态导致的,但是经过我实验,如果我在动画初始状态设置一些明显的样式,结束后依然只会影响到opacity。

所以我得出结论,ios动画在opacity的变化上就是有bug(当然这个结论只是我粗略的实验得出的)。
【bug记录】ios动画闪烁,@keyframe动画在100%的时候设置为opacity:0,最后一帧会变成opacity:1_第2张图片

解决办法

以下是我尝试过的一些办法,【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;
  }
}

你可能感兴趣的:(bug解决方法,bug,ios,css3,opacity)