css 接连出现后消失动效

<template>
    <view class="barrages">
        <view class="join">
            <image class="gif" src="背景图" mode="aspectFill">
            </image>
            <view class="barrages-item">
                <view class="tag flex-center">
                    <image class="logo" :src="info.imgUrl" mode="widthFix"></image>
                    <view class="user" v-if="join">
                        {{info.name}}加入拼团
                    </view>
                    <view class="prize" v-else>
                        <view>{{info.name}}助力成功奖金</view>
                        <view class="color-base-text">+{{info.money}}元</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['info'],
        data() {
            return {
                join: true，
                info:{
                    logo:'头像',
                    name:'xxxx,
                    money:300
                }
            }
        },
        methods: {
            init() {
                setTimeout(() => {
                    this.join = false
                }, 3000)
            }
        }
    }
</script>

<style lang="scss" scpoed>
    .barrages {
        width: 100%;
        height: 392rpx;
        overflow: hidden;
        white-space: nowrap;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);

        .join {
            width: 100%;
            height: 100%;
            position: relative;
            // 先出现加入拼团后消失，隔几秒出现助力金额后消失
            animation: appear 0.5s linear forwards, disappear 0.5s linear forwards 1.5s, appear 0.5s linear forwards 3s, disappear 0.5s linear forwards 4.5s;

            .gif {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0%;
                top: 0;
            }

            .logo {
                width: 88rpx;
                height: 88rpx;
                margin-right: 20rpx;
                border-radius: 50%;
            }

            @keyframes appear {
                0% {
                    opacity: 0;
                    transform: translateX(100%);
                }

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

            @keyframes disappear {
                0% {
                    opacity: 1;
                    transform: translateX(0);
                }

                100% {
                    opacity: 0;
                    transform: translateX(-100%);
                }
            }

            .tag {
                position: relative;
                height: 320rpx;

                .user {
                    color: #fff;
                    font-size: 44rpx;
                    font-weight: bold;
                    line-height: 1;
                }

                .prize {
                    view {
                        font-weight: bold;

                        &:first-child {
                            color: #fff;
                            font-size: 30rpx;
                        }

                        &:last-child {
                            font-size: 44rpx;
                            line-height: 1.3;
                        }
                    }
                }
            }
        }
    }
</style>

效果图如下：