Issue
I have an ellipsis animation that I use. I was trying to have it animate each dot one after the other, where dot A goes up, then A goes down and B goes up, then B down and C goes up, and then repeat. Here's what I tried:
.ellipsis {
display: flex;
}
.ellipsis div {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
margin: 0 5px;
animation: ellipsisAnimation 1s infinite;
}
@keyframes ellipsisAnimation {
0% {
opacity: 0.2;
transform: scale(0.8);
}
20% {
opacity: 1;
transform: scale(1);
}
40% {
opacity: 0.2;
transform: scale(0.8);
}
60% {
opacity: 0.2;
transform: scale(0.8);
}
80% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0.2;
transform: scale(0.8);
}
}
<div class="ellipsis">
<div></div>
<div></div>
<div></div>
</div>
However, this has produced a sort of weird heartbeat effect, where they all sort of...pulse? I dunno, I got lost.
In short: I'm trying to get these three dots, the three divs in the middle—I'm trying to get them to go boing, boing, boing, one after the other.
Solution
If the 3-dot is static, we can add delay on the subsequent dot, and make sure there's an "idle" phase in the animation keyframes.
.ellipsis {
display: flex;
}
.ellipsis div {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
margin: 0 5px;
animation: ellipsisAnimation 1s ease-in-out infinite;
}
.ellipsis div:nth-child(2) {
animation-delay: 0.3s;
}
.ellipsis div:nth-child(3) {
animation-delay: 0.6s;
}
@keyframes ellipsisAnimation {
0% {
opacity: 0.2;
transform: scale(0.8);
}
20% {
opacity: 1;
transform: scale(1);
}
40% {
opacity: 0.2;
transform: scale(0.8);
}
100% {
opacity: 0.2;
transform: scale(0.8);
}
}
Answered By - ChenX
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.