css Question posted in
Some basic documentation can be found here.

CSS Animate elements independently from each other

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.
Thanks,
Julius

Tags:

2

Answers


  1. 0

    Finalized code:

    <html>

<head>
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
    * {
      padding: 0;
      margin: 0;
      font-family: "poppins";
    }
    
    @keyframes moveup1 {
      0% {
        transform: translateY(200px);
      }
      50% {
        transform: scaleX(1.17);
      }
      100% {
        transform: translateY(0px);
      }
    }
    
    @keyframes moveup2 {
      0% {
        transform: translateY(200px);
      }
      45% {
        transform: scaleX(1.12);
      }
      100% {
        transform: translateY(0px);
      }
    }
    
    @keyframes moveup3 {
      0% {
        transform: translateY(200px);
      }
      40% {
        transform: scaleX(1.15);
      }
      100% {
        transform: translateY(0px);
      }
    }
    
    .container {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 70px;
    }
    
    .headlinemoveup1 {
      animation: moveup1 forwards 5s;
      font-size: 2rem;
      font-weight: 800;
    }
    
    .headlinemoveup2 {
      animation: moveup2 forwards 5s;
      font-size: 2rem;
      font-weight: 800;
    }
    
    .headlinemoveup3 {
      animation: moveup3 forwards 5s;
      font-size: 2rem;
      font-weight: 800;
    }
  </style>
</head>

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

</html>

    There were a few problems in your code such as you didnt inclose the three divs in a container which led to the missplacement of these divs on the screen. Since you can use the shorthand for animation attribute in css you dont need to specify every animation property for the div.

    The main problem though was with the @keyframes part, there the translation of divs was a bit wacky so it didnt perform as excepted. Also you set the animation iteration count to infinite i think that also caused some issue.

    Please let me know if it fixed your problem, you can reply if you have any other querry!

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search