英文:
CSS-HTML: Animation Delay Issue
问题
动画延迟不起作用。我也尝试使用了-webkit，但仍然不起作用。一切似乎都是正确的。我尝试应用负值，但仍然不起作用。我试图创建谷歌加载动画。为什么它不起作用？HTML似乎是正确的。延迟应该产生蛇效果。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<title>Training</title>
</head>
<body>
<div class="dots-container">
<div class="d dot1"></div>
<div class="d dot2"></div>
<div class="d dot3"></div>
<div class="d dot4"></div>
<div class="d dot5"></div>
</div>
<script type="module" src="training.js"></script>
</body>
</html>
希望这对你有帮助。
英文:
Animation delay is not working. Used -webkit as well but still not working. Everything seems to be correct. I tried applying negative values but still did not work. I am trying to create google loading animation. Why is it not working? HTML is seems to be correct as. The delay should give a snake effect.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh
}
.dots-container{
display: flex;
justify-content: space-evenly;
/*align-items: center;*/
width: 700px;
height: 100px
}
.dots-container .d{
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
animation: bouncyDots 1s ease-in-out infinite alternate;
}
.dot1{
background-color: yellow;
animation-delay: 0.3s;
}
.dot2{
background-color: purple;
animation-delay: 0.6s;
}
.dot3{
background-color: green;
animation-delay: 0.7s
}
.dot4{
background-color: red;
animation-delay: 0.8s
}
.dot5{
background-color: black;
animation-delay: 1s
}
@keyframes bouncyDots{
to{
transform: translateY(3rem);
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<title>Training</title>
</head>
<body>
<div class="dots-container">
<div class="d dot1"></div>
<div class="d dot2"></div>
<div class="d dot3"></div>
<div class="d dot4"></div>
<div class="d dot5"></div>
</div>
<script type="module" src="training.js"></script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 3
如果我正确理解您的问题，问题似乎与您如何将动画附加到元素有关。在您当前的设置中，动画同时应用于所有具有类.d的元素，导致所有点的动画同步开始。
为了实现每个点在不同时间开始其动画循环的期望效果，我建议分别调用每个点的动画。这样，您将能够更好地控制每个动画循环何时开始。以下是您可以设置的修订示例：
.dots-container .d {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
}
.dot1 {
background-color: yellow;
animation: bouncyDots 3s infinite ease-in-out;
}
.dot2 {
background-color: purple;
animation: bouncyDots 3s infinite ease-in-out;
animation-delay: 0.5s;
}
.dot3 {
background-color: green;
animation: bouncyDots 3s infinite ease-in-out;
animation-delay: 1s;
}
.dot4 {
background-color: red;
animation: bouncyDots 3s infinite ease-in-out;
animation-delay: 1.5s;
}
.dot5 {
background-color: black;
animation: bouncyDots 3s infinite ease-in-out;
animation-delay: 1.8s;
}
@keyframes bouncyDots {
0% {
transform: translateY(0);
}
50% {
transform: translateY(3rem);
}
100% {
transform: translateY(0);
}
}
希望这对您有所帮助。
英文:
If I've correctly understood your question, the issue seems to be related to how you've attached the animation to the elements. In your current setup, the animation is applied to all the elements with the class .d simultaneously, leading to a synchronized start of the animation for all the dots.
To achieve the desired effect of having each dot begin their animation cycle at a different time, I would recommend invoking the animation separately for each dot. This way, you'll have more control over when each animation cycle begins. Here's a revised example of how you could set this up:
.dots-container .d {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
/* animation: bouncyDots 1s ease-in-out infinite alternate; */
}
.dot1 {
background-color: yellow;
animation: bouncyDots 3s infinite ease-in-out;
}
.dot2 {
background-color: purple;
animation: bouncyDots 3s infinite ease-in-out;
animation-delay: 0.5s;
}
.dot3 {
background-color: green;
animation: bouncyDots 3s infinite ease-in-out;
animation-delay: 1s;
}
.dot4 {
background-color: red;
animation: bouncyDots 3s infinite ease-in-out;
animation-delay: 1.5s;
}
.dot5 {
background-color: black;
animation: bouncyDots 3s infinite ease-in-out;
animation-delay: 1.8s;
}
@keyframes bouncyDots {
0% {
transform: translateY(0);
}
50% {
transform: translateY(3rem);
}
100% {
transform: translateY(0);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论