Question 304969 in Html Question posted in
Some basic documentation can be found here.

Html – Trying to get this ellipsis animation to work

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:

CSS:

.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);
    }
}

HTML:

<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.

Tags:

2

Answers


  1. 0

    The keyword here is animation-delay:

    .ellipsis {
  display: flex;
}

.ellipsis div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgb(0, 0, 0);
  margin: 0 5px;
  opacity: 0.2;
  transform: scale(0.8);
  animation: ellipsisAnimation 1s .5s linear alternate infinite;
}

.ellipsis div:first-child {
  animation-delay: .25s;
}

.ellipsis div:last-child {
  animation-delay: .75s;
}

@keyframes ellipsisAnimation {
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
    <div class="ellipsis">
  <div></div>
  <div></div>
  <div></div>
</div>
    Login or Signup to reply.
  2. 0

    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);
      }
  }

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search