一：类型

1. transform（变形）‌

‌功能‌：静态改变元素的‌几何形态‌，例如平移、旋转、缩放或倾斜。

‌特点‌：

‌不触发动画‌：仅修改元素的最终呈现，变化是瞬间完成的。

‌无过渡效果‌：直接应用变形，没有中间过程。

transform: translateX(50px);  /* 水平移动 */
transform: rotate(45deg);     /* 旋转 */
transform: scale(1.5);        /* 缩放 */
transform: skew(30deg);       /* 倾斜 */

用途‌：调整元素位置、形状，常与 transition 或 animation 结合实现动画。

‌2. transition（过渡）‌

‌功能‌：控制 CSS ‌属性变化的过渡效果‌，让属性值变化更平滑。

‌特点‌：

‌需要触发条件‌：依赖事件（如 :hover、:active 或 JavaScript 修改属性）来启动。

‌双状态过渡‌：仅定义‌开始和结束状态‌之间的过渡，无法定义中间步骤。

‌配置参数‌：可设置过渡的‌属性、持续时间、速度曲线、延迟‌。

transition: [property] [duration] [timing-function] [delay];

用途‌：按钮悬停效果、简单状态切换动画。

‌3. animation（动画）‌

‌功能‌：通过‌关键帧（@keyframes）‌ 定义复杂的多阶段动画。

‌特点‌：

‌无需触发‌：可自动播放，或通过 JavaScript 控制。

‌多状态控制‌：支持定义多个中间步骤（如 0%、50%、100%）。

‌灵活配置‌：可设置‌循环次数、方向、填充模式‌等。

/* 定义关键帧 */
@keyframes slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
/* 应用动画 */
animation: slide 2s ease infinite;

用途‌：轮播动画、无限循环动画、复杂序列效果。

二：总结

1：transform + transition‌：悬停时平滑旋转

2：transform + animation‌：创建连续旋转动画