在动画发生后添加延迟，以便触发另一个动画

/* 第一个动画 */
@keyframes firstAnimation {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 第二个动画 */
@keyframes secondAnimation {
  from { transform: translateY(0); }
  to { transform: translateY(100px); }
}

.element {
  animation: firstAnimation 1s forwards;
}

.element.delayed {
  animation: secondAnimation 1s 1s forwards; /* 延迟1秒后开始第二个动画 */
}

import gsap from 'gsap';

// 第一个动画
gsap.to('.element', { duration: 1, x: 100 });

// 延迟1秒后开始第二个动画
setTimeout(() => {
  gsap.to('.element', { duration: 1, y: 100 });
}, 1000);

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const App = () => {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="box"></div>
      </CSSTransition>
    </div>
  );
};

export default App;

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}