Text appearing animation-CodePudding

I am trying to create animation, when I click button, the numbers one by one should move to the left. This works, but problem is when animation finishes, they go back to the right. How do I make them stay on the left when animation finishes? Demo

import React from 'react';
import './style.css';

export default function App() {
  let [animate, setAnimate] = React.useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setAnimate(true);
        }}
      >
        animate
      </button>
      {[1, 2, 3, 4, 5, 6, 7].map((x, i) => {
        return (
          <div
            className={animate ? 'fadein-item' : 'initial-item'}
            style={{ animationDelay: `${i}s` }}
          >
            {x}
          </div>
        );
      })}
    </div>
  );
}

css

.initial-item {
  transform: translateX(200px);
}
.fadein-item {
  transform: translateX(200px);
  animation-name: fadeIn;
  animation-duration: 2s;
}
@keyframes fadeIn {
  from {
    transform: translateX(200px);
  }
  to {
    transform: translateX(0px);
  }
}

CodePudding user response：

Use animation-fill-mode: forwards. This will keep the last animated frame of your keyframe animation.

You can also combine your animation properties with a shorthand: animation: fadeIn 2s forwards;