基本上，我有一些气泡的图像，它们被设置了从图像底部到顶部的动画。然后，它们以不同的宽度在不同的时间后上升到图像。然而，当它们在底部时，它们都可以在一条直线上看到。我该如何使它们只有在开始上升到图像中时才可见。
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<link rel="stylesheet" href="thing.css">
<title>Document</title>
</head>
<body>
<div class="bubbles" id="bubbles">
<img src="./Images/bubble copy.png" alt="">
<img src="./Images/bubble copy.png" alt="">
<img src="./Images/bubble copy.png" alt="">
<img src="./Images/bubble copy.png" alt="">
<img src="./Images/bubble copy.png" alt="">
<img src="./Images/bubble copy.png" alt="">
<img src="./Images/bubble copy.png" alt="">
</div>
</body>
</html>CSS：
.bubbles img {
width: 50px;
animation: bubble 7s linear infinite;
}
.bubbles {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
position: absolute;
bottom: -70px;
}
@keyframes bubble {
0% {
transform: translateY(0);
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
transform: translateY(-80vh);
opacity: 0;
}
}
.bubbles img:nth-child(1) {
animation-delay: 7.5s;
width: 25px;
}
.bubbles img:nth-child(2) {
animation-delay: 0s;
}
.bubbles img:nth-child(3) {
animation-delay: 3s;
width: 65px;
}
.bubbles img:nth-child(4) {
animation-delay: 2s;
}
.bubbles img:nth-child(5) {
animation-delay: 4.5s;
}
.bubbles img:nth-child(6) {
animation-delay: 6s;
}
.bubbles img:nth-child(7) {
animation-delay: 1.5s;
width: 25px;
}您可以使用setTimeout和不同的时间。这可能不是最好的解决方案，但它是可行的。
<img id=img src="img.png">
<script>
let img = document.getElementById('img')
let time = 1000 // time in milliseconds
img.hidden = true // set img to hidden on load
setTimeout(()=> {
img.hidden = false // after timeout show img
}, time)
</script>