css3的@keyframe动画在100%的时候设置为opacity:0在IOS上最后一帧会变成opacity:1会闪一下

savealllive

于 2022-12-12 14:48:54 发布

阅读量492

点赞数

分类专栏： css 文章标签： css3 动画前端

本文链接：https://blog.csdn.net/savealllive/article/details/128287032

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

做了一个骚操作，给父标签加了一个overflow:hidden;

.labelBox {
        width: 100%;
        height: 50%;
        position: absolute;
        z-index: 3;
        bottom: 0;
        overflow: hidden;
        left: 0;
        .labelItem {
            position: absolute;
            bottom: 0%;
            opacity: 0;
            height: 0.72rem;
            animation-iteration-count: infinite!important;
            &:nth-child(6) {
                left: 0.22rem;
                animation: opacityChange 5s ease-out 0s;
            }
         }
    }
    @keyframes opacityChange {
        0% {
            bottom: 0%;
            opacity: 0.8;
        }
        100% {
            bottom: 100%;
            opacity: 0;
        }
    }