css关键帧从右往左滚动动画

<view class="image-animation">
    <view class="swiper" :style="{ 'animation-duration': images.length * 1.5 + 's'}">
        <view class="swiper-image" v-for="(item,index) in images" :key="index">
            <image :src="item" mode="aspectFit"></image>
        </view>
         // 控制首尾相连
        <view class="swiper-image" v-for="(item,index) in images" :key="index">
            <image :src="item" mode="aspectFit"></image>
        </view>
    </view>
</view>

 .image-animation {
    width: 45%;
    height: 50rpx;
    white-space: nowrap;
    position: relative;
    overflow: hidden;

    .swiper {
        position: absolute;
        animation: imageGif linear infinite;

        .swiper-image {
            width: 50rpx;
            height: 50rpx;
            display: inline-block;
            margin-right: 30rpx;

            image {
                position: relative;
                display: inline-block;
                width: 100%;
                height: 100%;
            }
        }

        @keyframes imageGif {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%); // 控制首尾相连
            }
        }
    }
}

效果图：

<view class="barrage">
    <view class="item" :style="{ 'animation-duration': barrages.length * 10 + 's'}">
        <view>
            <view :style="{'margin-right':pageWidth+'px'}" class="tag" v-for="(item,index) in barrages"
                :key="index">
                <text class="text-white">
                    {{item.content}}
                </text>
            </view>
        </view>
    </view>
</view>

export default {
    data() {
        return {
            barrages: [],
            pageWidth: ''
        }
    },
    mounted() {
        let info = uni.getSystemInfoSync();
        let windowWidth = info.windowWidth
        if (windowWidth > 768) windowWidth = 768
        // 屏幕宽度
        this.pageWidth = windowWidth;
    }
}

.barrage {
    width: 100%;
    height: 70rpx;
    white-space: nowrap;
    position: relative;
    overflow: hidden;

    .item {
        position: absolute;
        animation: barrage linear infinite;

        .tag {
            position: relative;
            display: inline-block;
            font-size: 24rpx;
            line-height: 68rpx;
        }

        @keyframes barrage {
            0% {
                transform: translateX(10%);
            }

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

效果图如下：