过渡（Transition）：
过渡效果是由元素的状态变化触发的，例如：当鼠标悬停在某个元素上、或当某个 CSS 属性值发生改变时。
必须指定起始状态和结束状态。过渡会在两者之间自动平滑过渡。
过渡的触发通常是用户交互或通过 JavaScript 来更改属性。
过渡的效果只有在状态发生变化时才会执行一次。例如，鼠标从元素移开时过渡结束。过渡时间通常只有一次，不会自动重复。可以设置延迟时间（transition-delay）来控制过渡的开始时间。
动画（Animation）：
动画更为复杂，可以在指定的时间范围内多次变化，并且不一定需要用户交互来触发。
动画使用 @keyframes 来定义一系列的关键帧，可以设置不同的属性值来创建多步过渡效果。动画可以自动开始、循环播放或通过 JavaScript 控制播放的时间和状态。
动画可以在指定的时间内运行多次或无限次。例如，通过 infinite 设置动画为无限循环。
动画可以更灵活地控制持续时间、延迟时间以及是否自动重复
