CSS Animate elements independently from each other

Issue

I want to animate headlines on a web project via CSS. I want them to move up and scale up slightly whenever each single headline reaches 50% of its animation. In other word: I want them to scale independently from each other not all together.

However with the code below, that's exactly what happens:

@keyframes moveup1 {
  0% {
    transform: translateY(400px) scaleX(1);
  }
  50% {
    transform: translateY(0) scaleX(1.2);
  }
  100% {
    transform: translateY(-400px) scaleX(1);
  }
}

@keyframes moveup2 {
  0% {
    transform: translateY(400px) scaleX(1);
  }
  49% {
    transform: translateY(0) scaleX(1.2);
  }
  100% {
    transform: translateY(-400px) scaleX(1);
  }
}

@keyframes moveup3 {
  0% {
    transform: translateY(400px) scaleX(1);
  }
  51% {
    transform: translateY(0) scaleX(1.2001);
  }
  100% {
    transform: translateY(-400px) scaleX(1);
  }
}

.headlinemoveup1 {
  animation-name: moveup1;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.headlinemoveup2 {
  animation-name: moveup2;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.headlinemoveup3 {
  animation-name: moveup3;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

<div class="headlinemoveup1">Element 1</div>
<div class="headlinemoveup2">Element 2</div>
<div class="headlinemoveup3">Element 3</div>

I already split up the animations in three different ones as you can see and also tried out to give them slightly different values. Yet the keep scaling together.

Any idea how I can fix that would be greatly appreciated.

Solution

The issue with your code is not with the keyframes or the animation definitions themselves, but rather with the synchronization of animations when they are started. Since all your animations have the same duration and timing function, and they likely start at the same time, they will appear to be animating together even though they are defined separately.

To make each headline animate independently, you can introduce a delay in the start of each animation. This can be done using the animation-delay property in CSS. By setting different delays for each headline, they will start their animations at different times, giving the appearance of independent movement.

.headlinemoveup1 {
    animation-name: moveup1;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* No delay for the first element */
    animation-delay: 0s;
}

.headlinemoveup2 {
    animation-name: moveup2;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* Delay the start of the second element's animation */
    animation-delay: 1s;
}

.headlinemoveup3 {
    animation-name: moveup3;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* Further delay for the third element */
    animation-delay: 2s;
}

Answered By - Kemal