关于css3 animate动画的问题

问题描述

我想实现类似这种气泡连续不断往上冒的动画效果，用了keyframes来控制气泡的transform: translateY属性，让气泡向上运动，为了不让所有气泡一起并排着向上运动，我给每个气泡都添加了一个随机值的animation-delay延迟属性，但是这样的话动画循环播放几次之后，页面中的气泡就会越来越多导致页面卡顿。

大概是想实现这种效果https://wow.techbrood.com/fiddle/10318，但是我的元素会比较多

相关代码

.bg-bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    bottom: -160px;
    animation: square 5s infinite;
    transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
    left: 20%;
    animation-delay: 2s;
    animation-duration: 10s;
}
@keyframes square {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-700px);
    }
}

javascript css3 animate 动画

html5