About CSS animations

Question

I want to stop the paragraph at the place where the animation stops. Is there any way to do that?

.area {
   display: flex;
   position: relative;
   animation: move 5s linear;
}

@keyframes move {
   0% {
      left: -20%;
   }
   100% {
      left: 20%;
   }
}

I want to stop the paragraph at left: 20%; position. Not to go to the starting position after the cycle. Can I do that?

Answer 1

Set the default position outside of keyframes.

.area {
  display: flex;
  position:relative;
  animation: move 5s linear;
  left: 20%; /* default position */
  background: black; width:50px; height:50px; /* just for display here */
}

@keyframes move{
  0% { left: -20%; }
  100% { left: 20%; }
}

<div class="area"></div>

Or, set animation-fill-mode: forwards

.area {
  display: flex;
  position:relative;
  animation: move 5s linear;
  animation-fill-mode: forwards; /* set here */
  background: black; width:50px; height:50px; /* just for display here */
}

@keyframes move{
  0% { left: -20%; }
  100% { left: 20%; }
}

<div class="area"></div>