我想知道如何在动画首次启动时使其平滑。目前，每个气泡在转换为平滑动画之前都会向前倾斜，但我不希望在启动时出现任何明显的倾斜。
我尝试过以下方法:
- 向气泡类添加过渡属性
- 将动画计时功能更改为缓入
- 将动画的持续时间更改为更长
这些都不起作用，我不知道如何实现这种效果。
$(document).ready(function() {
var bubbles = $('.bubble')
function animate_bubbles() {
bubbles.each(function(index) {
$(this).css( 'animation-delay', `${index * 0.3}s` )
$(this).addClass('bubble-active')
})
}
animate_bubbles()
});html, body {
height: 100%;
}
#page-wrapper {
box-sizing: border-box;
padding: 10%;
background: black;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.bubble {
background: skyblue;
border-radius: 50%;
width: 5%;
margin-right: 5%;
}
.bubble:before {
content: '';
display: block;
padding-top: 100%;
}
.bubble-active {
animation: bubble-animation 3s infinite linear;
}
@keyframes bubble-animation {
from {
transform: rotate(0deg) translateX(25%) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(25%) rotate(-360deg);
}
}<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<link rel='stylesheet' href='test.css'>
</head>
<body>
<div id='page-wrapper'>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='test.js'></script>
</body>
</html>最佳答案
它们像这样向右移动，因为动画开始立即告诉气泡translateX(25%)。如果您加载已应用转换的页面，它就会像您想要的那样工作。请参阅下面的更新代码片段，仅添加一行 CSS。
$(document).ready(function() {
var bubbles = $('.bubble')
function animate_bubbles() {
bubbles.each(function(index) {
$(this).css( 'animation-delay', `${index * 0.3}s` )
$(this).addClass('bubble-active')
})
}
animate_bubbles()
});html, body {
height: 100%;
}
#page-wrapper {
box-sizing: border-box;
padding: 10%;
background: black;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.bubble {
background: skyblue;
border-radius: 50%;
width: 5%;
margin-right: 5%;
transform: rotate(0deg) translateX(25%) rotate(0deg);
}
.bubble:before {
content: '';
display: block;
padding-top: 100%;
}
.bubble-active {
animation: bubble-animation 3s infinite linear;
}
@keyframes bubble-animation {
from {
transform: rotate(0deg) translateX(25%) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(25%) rotate(-360deg);
}
}<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<link rel='stylesheet' href='test.css'>
</head>
<body>
<div id='page-wrapper'>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
<div class='bubble'></div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='test.js'></script>
</body>
</html>关于jquery - CSS 动画启动时不稳定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46554439/