应该怎么做动画效果

用css animation 在做动效时我发现在一个列表中会出现页面卡顿问题，这个问题我用的鸿蒙手机测试会出现，苹果没事，
动效问题应该采用什么方法做。
下面是我的代码：
<template>
<view>
<view style="width: 100%;">
<view class="vvv" v-for="(item,index) in 50" :key="index">
<view class="gotoTest"></view>
<button class="btn animation1">测试</button>
</view>
</view>
</view>
</template>
<style lang="scss">
.vvv{
width: 100%;
height: 100rpx;
border-bottom: 1rpx solid #000;

}  
.gotoTest{  
    border-radius: 30rpx;  
    position: absolute;  
    width: 200rpx;  
    height: 50rpx;  
    text-align: center;  
    background:  #dcf8e9;  
    animation: scal2 1s linear infinite forwards;  
    transform-origin: center center;  
}  
.btn{  
        width: 200rpx;  
        height: 50rpx;  
        background: linear-gradient(90deg, #06C361 0%, #00E96F 100%);  
        border-radius: 24rpx;  
        font-size: 22rpx;  
        line-height: 50rpx;  
        color: #fff;  
        text-align: center;  
        padding: 0 24rpx;  
        position: relative;  

        &.animation1{  
            animation: scal1 1s linear  infinite  forwards;  
            transform-origin: center center;  
        }  

}  
@keyframes scal1 {  
    0%{  
        transform: scale(1);  
    }  
    50%{  
        transform: scale(1.1);  
    }  
    100%{  
        transform: scale(1.1);  
    }  
}  
@keyframes scal2 {  
    0%{  
        transform: scale(1);  
    }  
    49%{  
        transform: scale(1.1);  
        // border-color: #dcf8e9;  
        border-color: rgba(183,241, 209, 1);  
    }  
    100%{  
        transform: scale(1.3);  
        // border-color: rgba(220,248,233,0);  
        border-color: rgba(183,241, 209, 0.2);  
    }  
}  

</style>