关于css3 animate动画的问题

琲世
  • 25

问题描述

我想实现类似这种气泡连续不断往上冒的动画效果,用了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);
    }
}
回复
阅读 1k
2 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏