关于css3 animate动画的问题

Question

问题描述

我想实现类似这种气泡连续不断往上冒的动画效果，用了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);
    }
}

Answer 1

最好还是写canvas

https://js.do/shy2850/bubble

Answer 2

把所有气泡画在一个方形的平面上，移动平面，然后使用视窗效果，截掉超出部分，也可以实现你所想要的效果并且不会出现套圈情况，换个思维去做比较好