CSS教程（第八章）：CSS动画与过渡

在CSS中，动画（Animations）和过渡（Transitions）是两种为网页元素添加动态效果的重要技术。它们可以使网页更加生动和吸引人，提升用户体验。

一、CSS过渡（Transitions）

CSS过渡允许元素在改变样式时，以一种平滑的方式过渡。过渡效果可以应用于任何CSS属性，如颜色、宽度、高度等。

1. transition-property：指定应用过渡的CSS属性。可以指定一个或多个属性，或使用all表示所有属性。

   div {  
     transition-property: width, height;  
     /* 或者 */  
     transition-property: all;  
   }

    

2. transition-duration：指定过渡效果的持续时间，以秒（s）或毫秒（ms）为单位。

   div {  
     transition-duration: 2s;  
   }

    

3. transition-timing-function：指定过渡效果的速度曲线。可选项包括linear、ease、ease-in、ease-out、ease-in-out，或者自定义的贝塞尔曲线（cubic-bezier）。

   div {  
     transition-timing-function: ease-in-out;  
   }

    

4. transition-delay：指定过渡效果开始前的延迟时间。

   div {  
     transition-delay: 1s;  
   }

    

为了方便使用，以上四个属性可以简写为一个transition属性：

div {  
  transition: width 2s ease-in-out 1s;  
}

二、CSS动画（Animations）

CSS动画允许你创建复杂的动画效果，包括多个关键帧和循环播放。

1. @keyframes：用于定义动画的关键帧。

   @keyframes example {  
     0%   {background-color: red;}  
     25%  {background-color: yellow;}  
     50%  {background-color: blue;}  
     100% {background-color: green;}  
   }

    

2. animation-name：指定要绑定到选择器的关键帧名称。

   div {  
     animation-name: example;  
   }

    

3. animation-duration：指定动画完成一个周期所需的时间。

   div {  
     animation-duration: 4s;  
   }

    

4. animation-timing-function：与过渡效果中的transition-timing-function类似，指定动画的速度曲线。

   div {  
     animation-timing-function: ease-in-out;  
   }

    

5. animation-delay：指定动画开始前的延迟时间。

   div {  
     animation-delay: 2s;  
   }

    

6. animation-iteration-count：指定动画应该播放的次数。可以是具体次数，也可以是infinite表示无限次。

   div {  
     animation-iteration-count: infinite;  
   }

    

7. animation-direction：指定动画是否在每一轮后反向播放。可选项包括normal（默认）、reverse、alternate和alternate-reverse。

   div {  
     animation-direction: alternate;  
   }

    

8. animation-fill-mode：定义动画在播放之前、之后或两者之间的状态。可选项包括none、forwards、backwards、both。

   div {  
     animation-fill-mode: forwards;  
   }

    

同样地，以上属性也可以简写为一个animation属性：

div {  
  animation: example 4s ease-in-out 2s infinite alternate;  
}

三、使用场景

• 过渡效果通常用于简单的样式变化，如按钮点击后的颜色变化、菜单项的展开和收起等。
• 动画效果适用于更复杂的场景，如轮播图、加载动画、用户交互反馈等。

四、注意事项

• 动画和过渡效果可能会增加页面渲染的负担，因此在使用时要考虑性能和用户体验的平衡。
• 尽量避免在动画中使用过于复杂的样式和大量的关键帧，以免导致页面卡顿或崩溃。
• 动画和过渡效果应该与页面的整体设计和风格保持一致，以提升用户体验。