CSS过渡，转换与动画

在CSS中，过渡、转换和动画是实现界面效果的三种机制。

1. 过渡（Transition）：用于在属性改变时平滑地过渡到新的样式。

/* 应用于元素的所有改变 */
.element {
  transition: all 0.5s ease-in-out;
}
 
/* 仅应用于背景色和宽度 */
.element {
  transition: background-color 0.5s, width 0.5s;
}

2. 转换（Transform）：用于创建2D或3D转换效果。

/* 旋转 */
.element {
  transform: rotate(45deg);
}
 
/* 缩放 */
.element {
  transform: scale(1.5, 1.5);
}
 
/* 倾斜 */
.element {
  transform: skew(30deg, 20deg);
}
 
/* 移动 */
.element {
  transform: translate(50px, 100px);
}

3. 动画（Animation）：结合关键帧和过渡，创建更复杂的动画序列。

/* 定义关键帧 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
/* 应用动画 */
.element {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

这些技术可以单独使用，也可以结合使用以创建更复杂的界面效果。