小程序在iOS css动画闪屏

3361关注10719浏览

纯css  做的水波纹动画    安卓机上没问题   但是用苹果手机测试   却出现闪屏效果

<view class='recordPart wavePart' bindtap='stopRecord' wx:if="{{recoding == false}}">

    <view class='wave wave1'><image src='/images/speaker_icon.png'></image></view>

    <view class='wave wave2'></view>

    <view class='wave wave3'></view>

    <view class='wave wave4'></view>

</view>


.wavePart {

position: relative;


}

@-webkit-keyframes opac{

from {

opacity: .5;

width:100%;

height:100%;

top:50%;

left:50%;

}

to {

opacity : 0;

width:200%;

height:200%;

top:50%;

left:50%;

}

}

.wave {

position: absolute;

top: 50%;

left: 50%;

width:100%;

height: 100%;

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

background-color: var(--main-color);

border-radius: 50%;

}

.wave1 {

z-index: 2;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

.wave2,

.wave3,

.wave4 {

-webkit-animation: opac 3s infinite;

}

.wave3{

-webkit-animation-delay: 1s;

/*border-color: green;*/

}

.wave4{

-webkit-animation-delay: 2s;

/*border-color: red;*/

}

.wave1 image {

width: calc(var(--base-size)*76rpx);

height: calc(var(--base-size)*111rpx);

}



展开全部
收起
3回答
提交回答
  • 至过去的我

    2044人对此回答表示赞同

    我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多>
    发布于
  • Ximena

    19人对此回答表示赞同

    同样遇到了这个问题,感觉CSS动画在IOS机型上没有执行。

    展开
    19
    0回复
    发布于 5年前

    评论(0)

    收起评论

  • LanceCheng

    13人对此回答表示赞同

    我也遇到类似问题,iOS上的CSS3animation有问题,连续播放的没问题,单次执行的的各种问题,至今没发现规律。

    展开
    13
    0回复
    发布于 5年前

    评论(0)

    收起评论

  • 古小星

    8人对此回答表示赞同

    麻烦给个代码片段

    展开
    8
    0回复
    发布于 5年前

    评论(0)

    收起评论

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
咨询热线

13312967497

扫码添加业务即可随时咨询 还可领取小程序推广攻略

业务咨询: 13312967497
扫码咨询

扫码咨询套餐

回到顶部