css图片旋转翻面换成另一张图动画

<view>
    <view class="item" v-if="barrages.length > 0">
        <view class="tag flex-align">
            <image class="logo" :src="第二张图" mode="widthFix"></image>
            <view style="padding-left: 90rpx;">
                <view class="font-size-left-10">
                    附近的{{barrages[index].name}}
                </view>
                <view class="font-size-left-11">
                    成功提现 <text>{{barrages[index].money ? barrages[index].money : 1500}}元</text>
                </view>
            </view>
        </view>
    </view>
    <image class="logo1" :src="第一张图" mode="widthFix">
    </image>
</view>

 image {
    width: 74rpx;
    height: 74rpx;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #fff;
    border-radius: 40rpx;
    margin-top: 0;
    margin-right: 20rpx;
}

.logo1 {
    // 等待内容出现后第一张图片翻转，等待内容收起后展示翻转并缩放图片，展示1s后消失
    animation: rotate90 0.2s linear forwards 1s, out1 0.2s linear forwards 3s, end1 0.2s linear forwards 4s;

    @keyframes rotate90 {
        0% {
            opacity: 1;
            transform: rotateY(0deg);
        }

        99% {
            opacity: 1;
            transform: rotateY(90deg);
        }

        100% {
            opacity: 0;
            transform: rotateY(90deg);
        }
    }

    @keyframes out1 {
        0% {
            opacity: 1;
            transform: rotateY(0deg) scale(0);
        }

        1% {
            opacity: 1;
            transform: rotateY(0deg);
        }

        100% {
            opacity: 1;
            transform: rotateY(0deg) scale(1);
        }
    }

    @keyframes end1 {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
}

.item {
    padding: 10rpx 30rpx 10rpx 10rpx;
    border-radius: 50rpx;
    background-color: $base-color;
    transform: scaleX(0);
    // 内容从左往右缩放出现，展示3秒后从右往左缩放消失
    animation: out 0.5s linear forwards, end 0.5s linear 3s forwards;

    @keyframes out {
        0% {
            opacity: 0;
            transform: scaleX(0);
            transform-origin: left;
        }

        100% {
            opacity: 1;
            transform: scaleX(1);
            transform-origin: left;
        }
    }

    @keyframes end {
        0% {
            opacity: 1;
            transform: scaleX(1);
            transform-origin: left;
        }

        100% {
            opacity: 0;
            transform: scaleX(0);
            transform-origin: left;
        }
    }

    .tag {
        font-weight: bold;

        view {
            color: #090D0E;
            line-height: 1;
        }

        text {
            color: #F90035;
            font-size: 40rpx;
            line-height: 1;
        }



        .logo {
            transform: rotateY(90deg);
            // 内容出现后，等待第一张图片翻转后第二张图片连着翻转
            animation: rotate0 0.2s linear forwards 1.25s;

            @keyframes rotate0 {
                0% {
                    opacity: 0;
                    transform: rotateY(90deg);
                }

                1% {
                    opacity: 1;
                }

                100% {
                    opacity: 1;
                    transform: rotateY(0deg);
                }
            }
        }
    }
}
    

效果图如下： pan.baidu.com/s/1yUsZQUq2…