I have a green circle with many images inside of it.
Upon loading, the images have a simple animation in which they show up and bounce back at the positions I have set up. However, one of the images ( fruit-1 ) acts quite differently than the others.
The image with class fruit-1 shows up but stays at the position it showed up. At the end of the animation, it slides to the position it should end up.

Here is the React structure of the green circle and images:

import React from "react";
import "../../css/HomePage.css";

//Images
import apple from "../../Images/apple.png";
import banana from "../../Images/banana.png";
import orange from "../../Images/orange.png";
import strawberry from "../../Images/strawberry.png";

const Home = () => {
  return (
    <div class="home-container">
      <h1 className="welcome-text">
        <span className="greeting-text">Welcome to</span>
        <br />
        <span className="brand-name">Fitness-Tracker</span>
        <br />
        <button className="get-started-button">Get Started</button>
      </h1>
      <div class="green-circle">
        <img key="1" src={apple} alt="Fruit-1" className="fruit-1" />
        <img key="2" src={strawberry} alt="Fruit-2" className="fruit-2" />
        <img key="3" src={orange} alt="Fruit-3" className="fruit-3" />
        <img key="4" src={banana} alt="Fruit-4" className="fruit-4" />
      </div>
    </div>
  );
};

export default Home;

This is the CSS file for it:

body,
html {
  margin: 0;
  padding: 0;
}

.home-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  overflow: hidden;
}

.green-circle {
  height: 85vh;
  width: calc(22vh * 2);
  justify-self: end;
  align-self: center;
  background-color: #8cc63f;

  border-top-left-radius: 50rem;
  border-bottom-left-radius: 50rem;
  grid-column: 2;
}

.green-circle img {
  height: 25%;
  width: 50%;
  opacity: 0;
  animation: fruitFlyIn 1.5s cubic-bezier(0.25, 0.1, 0.25, 1.5) forwards;
  animation-delay: 5s;
}

.fruit-1 {
  position: relative;
  left: 80%;
  top: 0;
  --translateX: -80%;
  --translateY: 0;
}

.fruit-2 {
  position: relative;
  right: 50%;
  top: 50%;
  --translateX: -50%;
  --translateY: -50%;
}

.fruit-3 {
  position: relative;
  left: 35%;
  top: 65%;
  --translateX: -35%;
  --translateY: -65%;
}

.fruit-4 {
  position: relative;
  left: 10%;
  top: 0;
  --translateX: -30%;
  --translateY: 30%;
  --rotate: -45deg;
}

.welcome-text {
  font-size: 4vw;
  margin: 0 auto;
  justify-self: center;
  align-self: center;
  margin-bottom: 10rem;
  text-align: center;
  white-space: nowrap;
}

.welcome-text .greeting-text {
  font-weight: bold;
  color: black;
}

.welcome-text .brand-name {
  font-weight: bold;
  color: #8cc63f;
}

.get-started-button {
  padding: 1vw 4vw;
  font-size: 1.5vw;
  background-color: black;
  color: white;
  border: none;
  border-radius: 40px;
  cursor: pointer;
}

/* Animations */
@keyframes fruitFlyIn {
  0% {
    opacity: 0;
    transform: translate(
        calc(var(--translateX) + 100%),
        calc(var(--translateY) + 100%)
      )
      rotate(-180deg) scale(0.5);
  }
  70% {
    opacity: 1;
    transform: translate(
        calc(var(--translateX) - 10%),
        calc(var(--translateY) - 10%)
      )
      rotate(20deg) scale(1.1);
  }
  85% {
    transform: translate(
        calc(var(--translateX) + 5%),
        calc(var(--translateY) + 5%)
      )
      rotate(-10deg) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(var(--translateX), var(--translateY))
      rotate(var(--rotate, 0deg)) scale(1);
  }
}

A recording of the issue for better understanding

[Fiddle representing the issue in a more simple manner]
(https://jsfiddle.net/hqw1kvsn/47/)

I tried a bunch of different calculations, but mostly, I have tried changing the top value to something smaller ( 5%, 10%, even at simply 0 ) since I thought it might be some kind of bug with the value getting too big. However, that did not help; only the position did ( as expected ).