css实现内容按次序缩放出现动效

<view class="users">
    <view class="item" :class="'position'+index" v-for="(item,index) in infos.users" :key="index">
        <view>
            <image :src="item.logo"></image>
        </view>
        <view class="money">
            +{{item.money}}元
        </view>
    </view>
</view>
export default {
    data(){
        return {
            infos: {
                users: [{
                        money: 300,
                        logo: "头像",
                    },
                    {
                        money: 300,
                        logo: "头像",
                    },
                    {
                        money: 300,
                        logo: "头像"
                    },
                    {
                        money: 300,
                        logo: "头像",
                    },
                    {
                        money: 300,
                        logo: "头像"
                    },
                    {
                        money: 300,
                        logo: "头像",
                    },
                    {
                        money: 300,
                        logo: "头像"
                    }
                ]
            }
        }
    }
}
.users {
    width: 100%;
    position: relative;

    .item {
        position: absolute;
        text-align: center;
        margin-bottom: 10rpx;

        image {
            border-radius: 50%;
            border: 1px solid #fff;
            margin-bottom: 10rpx;
        }

        .money {
            color: #fff;
            font-size: 34rpx;
            border-radius: 30rpx;
            padding: 0 30rpx;
            background-color: #FF4169;
            display: inline-block;
        }

        .desc {
            margin-top: 5rpx;

            view {
                color: #fff;
                font-size: 34rpx;
                line-height: 1.3;
            }
        }
    }

    .position0,
    .position1,
    .position2 {
        opacity: 0;
    
        image {
            width: 105rpx;
            height: 105rpx;
        }
    }

    .position0 {
        left: 50%;
        transform: translateX(-50%);
        animation: gif0 0.4s ease-in forwards;
    }

    @keyframes gif0 {
        from {
            transform: translateX(-50%) scale(0)
        }

        to {
            opacity: 1;
            transform: translateX(-50%) scale(1)
        }
    }

    .position1 {
        margin-top: 24%;
        left: 15%;
        animation: gif1 0.4s ease-in 0.4s forwards;
    }

    @keyframes gif1 {
        from {
            transform: scale(0)
        }

        to {
            opacity: 1;
            transform: scale(1)
        }
    }

    .position2 {
        margin-top: 24%;
        right: 15%;
        animation: gif1 0.4s ease-in 0.8s forwards;
    }

    .position3,
    .position4,
    .position5,
    .position6 {
        opacity: 0;
        margin-top: 55%;

        image {
            width: 88rpx;
            height: 88rpx;
        }

        .money {
            padding: 0 15rpx;
        }
    }

    .position3 {
        left: 5%;
        animation: gif1 0.4s ease-in 1.2s forwards;
    }

    .position4 {
        left: 29%;
        animation: gif1 0.4s ease-in 1.6s forwards;
    }

    .position5 {
        left: 53%;
        animation: gif1 0.4s ease-in 2s forwards;
    }

    .position6 {
        right: 4%;
        animation: gif1 0.4s ease-in 2.4s forwards;
    }
}
    

效果图如下图所示：