What is this doing animation doing?

programming web dev
1 
@keyframes moving {
  0% {
    transform: translateX(500px);
  }
  50% {
    transform: translateX(1000px);
  }
  100% {
    transform: translate(1000px, 500px);
  }
}

I understand from and to type animations. But I don’t understand this one.What does it mean? Output is not getting understood by me.

Here’s the full code:

2

At the start of the animation (0%) move the block to 500px from its starting location. As this is the first frame of the animation there will be no animation of the block moving to this location, it will instantly start at this position.
Then start moving to 1000px to the right of its starting location, it will get there at half the time of the animations length which will be 2.5 seconds. The starting location is the original location before the animation started.
Then end by moving to 1000px to the right and 500 down from its starting location and get there at the end of the animation.
The only other thing you might not know is the animation-fill-mode, best to go to MDN for an explanation as to what that does. This really could have used “forwards” as there is no delay at the start of the animation and also due to that it could of just set the starting location in .containers declaration and removed the 0% from “moving” and got the same result.

1 Like