蚂蚁森林收取能量泡泡效果实现（微信小程序css3动画）

需要实现的效果（类似蚂蚁森林收取能量）

dom部分

<view class="bubble">
   <image src="../../static/bubble.png" mode="widthFix"></image>
</view>

css部分

.bubble {
    width: 80rpx;
    position: absolute;
    top: 180rpx;
    left: 280rpx;
    animation: heart 2s ease-in infinite alternate;
}

@keyframes heart{
    from {transform: translate(0, 0)}
    to {transform: translate(0, 10rpx)}
}