CSS进阶技术：过渡效果(CSS transition)、动画效果(CSS animation)和变换效果(CSS transform)

CSS中的过渡效果可以通过transition属性来实现，它使得在改变元素的CSS属性时可以平滑地进行动画。

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

CSS动画效果通过@keyframes规则和animation属性来实现，它允许创建更复杂和精细的动画。

/* 定义一个名为fadeIn的动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 应用动画效果到元素 */
.element {
  animation: fadeIn 2s ease-in-out forwards;
}

CSS变换效果（transform）可以通过transform属性实现，如旋转、缩放、移动或倾斜元素。

/* 旋转元素30度 */
.element {
  transform: rotate(30deg);
}
 
/* 缩放元素到原始大小的1.5倍 */
.element {
  transform: scale(1.5);
}
 
/* 移动元素20像素 */
.element {
  transform: translateX(20px);
}

transition、animation和transform可以结合使用以创建更丰富和复杂的UI效果。