css间隔几秒实现从左到右出现后消失的底部弹幕

<template>
    <view class="barrages" v-if="showHidden">
        <view>
            <view class="barrages-item" v-if="barrages.length > 0">
                <view class="tag flex-align">
                    <image :src="barrages[index].imgUrl" mode="widthFix"></image>
                    <view>
                        <view class="font-size-left-10">
                            附近的{{barrages[index].name}}
                        </view>
                        <view class="font-size-left-11">
                            成功提现 <text>1500元</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                barrages: [],
                index: 0,
                isPng: true,
                showHidden: false
            }
        },
        mounted() {
            this.getBarrages()
        },
        methods: {
            // 间隔几秒后出现
            integralShow(seconds) {
                setInterval(() => {
                    this.showHidden = !this.showHidden
                    // 真假切换,真时才显示和index++ 所以显示间隔时间是设置的两倍,修改时注意
                    if (this.showHidden) {
                        if (this.index >= this.barrages.length - 1) {
                            this.index = -1
                        }
                        this.index++
                    }
                }, seconds)
            },
            getBarrages() {
                this.barrages = [{
                        name: 'xxx',
                        money: 1500,
                        imgUrl: '头像'
                    },
                    {
                        name: 'xxx',
                        money: 100,
                        imgUrl: '头像'
                    }
                ]
                // 动画时间是7秒 所以一半是3.5秒
                let timer =5000 + 3500
                this.integralShow(timer)
            },
            imageLoaded() {
                this.isPng = false
            }
        }
    }
</script>

<style lang="scss" scoped>
    .barrages {
        overflow: hidden;
        white-space: nowrap;
        position: fixed;
        left: -50%;
        bottom: 100rpx;
        animation: out 1s linear forwards, end 1s linear 5s forwards;

        @keyframes out {
            0% {
                opacity: 0;
                left: -50%;
            }

            100% {
                opacity: 1;
                left: 20rpx;
            }
        }

        @keyframes end {
            0% {
                opacity: 1;
                left: 20rpx;
            }

            100% {
                opacity: 0;
                left: -50%;
            }
        }

        &-item {
            padding: 10rpx 30rpx 10rpx 10rpx;
            border-radius: 50rpx;
            background-color: $base-color;

            .tag {
                font-weight: bold;

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

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

                image {
                    width: 80rpx;
                    height: 80rpx;
                    border: 1px solid #fff;
                    border-radius: 40rpx;
                    margin-top: 0;
                    margin-right: 20rpx;
                }
            }
        }
    }
</style>

参考图如下：