community/tutorials/css-animation

CSS 动画是一种强大的技术，它可以让网页元素以平滑和动态的方式改变其样式。下面是一些 CSS 动画的基础知识和技巧。

CSS 动画基础

1. 过渡（Transitions）: 过渡是当元素的状态改变时，平滑地改变其样式的一种方式。例如，改变元素的宽度或颜色。

   .box {
     width: 100px;
     height: 100px;
     background-color: blue;
     transition: width 0.5s, background-color 0.5s;
   }
   
   .box:hover {
     width: 200px;
     background-color: red;
   }
   

2. 关键帧动画（Keyframe Animations）: 关键帧动画允许你定义一系列关键帧，每个关键帧定义了动画在某个时间点的样式。

   @keyframes example {
     from { background-color: red; }
     to { background-color: yellow; }
   }
   
   .box {
     animation: example 5s;
   }
   

实用技巧

• 使用 will-change 属性来告诉浏览器哪些属性将会改变，从而优化性能。

  .box {
    will-change: width, background-color;
  }
  

• 使用 transform 和 opacity 属性进行动画，因为它们不会触发浏览器的重排（reflow）和重绘（repaint）。

扩展阅读

想要了解更多关于 CSS 动画的细节和高级技巧，可以阅读我们的CSS 动画教程。

CSS 动画示例