如何让“Reactjs Modal”在屏幕上从右飞到中心

import React, { useState } from 'react';
import Modal from 'reactjs-modal';

const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={openModal}>打开 Modal</button>
      <Modal isOpen={isOpen} onRequestClose={closeModal}>
        {/* Modal 内容 */}
      </Modal>
    </div>
  );
};

export default MyComponent;

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.modal {
  animation: slideIn 0.5s ease-in-out;
}

<Modal isOpen={isOpen} onRequestClose={closeModal} className="modal">
  {/* Modal 内容 */}
</Modal>