触发方式：
- **CSS过渡**（Transitions）需要一个明确的触发事件，如`:hover`、`:focus`状态改变，或是通过JavaScript改变元素的类名或属性值。也就是说，过渡效果是由状态改变这一事件所触发的，并且会在状态改变前后应用。
- **CSS动画**（Animations）则不依赖于特定的触发事件。它们可以通过设置`animation-duration`和`animation-iteration-count`等属性来控制何时开始、持续多久以及是否重复，甚至可以使用`animation-delay`来设定延迟启动，这使得动画能够在页面加载时或按预定时间自动开始。
关键帧控制：
- **过渡**提供了一种简单的方式从一个状态平滑过渡到另一个状态，它本质上只有一个开始和结束状态（两个关键帧）。你可以控制过渡的持续时间和速度曲线，但不能定义中间状态。
- **动画**则支持复杂的运动序列，允许定义多个关键帧（`@keyframes`），每个关键帧可以设置元素的不同样式，从而创建出更复杂、多步骤的动画效果。这使得动画可以有更细致的控制和更多的创意空间。
与JavaScript的交互
- 过渡和JavaScript的集成通常涉及监听过渡结束的事件（`transitionend`），这对于基于用户交互的反馈非常有用。
- 虽然动画也能与JavaScript配合，调整或控制动画的播放，但由于动画本身设计为更独立于外部事件，可能在某些场景下与JavaScript的交互不如过渡自然。
