博客站

CSS3动画中的transition和animation是两种实现动画效果的方式，它们之间存在一些显著的区别。以下是对这两种动画方式的详细比较：

一、定义与工作原理

1. transition（过渡）

   • 定义：transition（过渡）是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），并且设置过渡持续的时间。
   • 工作原理：当指定的CSS属性发生变化时，transition会按照预设的时间、速度曲线等参数，平滑地从旧值过渡到新值。

2. animation（动画）

   • 定义：animation（动画）是CSS3中另一种实现动画效果的方式，它允许通过定义多个关键帧以及每个关键帧中元素的属性值，来实现更为复杂的动画效果。
   • 工作原理：通过@keyframes规则定义动画的关键帧，然后在指定元素上通过animation属性调用动画。动画过程中，元素会在多个关键帧之间平滑过渡。

二、关键特性与差异

1. 触发方式

   • transition：需要由特定事件（如hover、click等）触发，才能开始动画效果。
   • animation：不需要特定事件触发，可以自发地立即播放动画效果。

2. 关键帧设置

   • transition：只能定义动画的开始状态和结束状态，即只有两个关键帧。
   • animation：可以设置多个关键帧，每个关键帧可以定义不同的样式属性，从而实现更复杂的动画效果。

3. 循环与重复

   • transition：通常是一次性的，除非再次触发事件，否则不会重复播放。
   • animation：可以设置循环次数，使动画效果重复播放。

4. 样式变化

   • transition：一条transition规则通常只能定义一个属性的变化。
   • animation：可以涉及多个属性的变化，并且每个属性在每个关键帧中都可以有不同的值。

5. 控制性

   • transition：相对简单，适合实现基本的平滑过渡效果。
   • animation：提供了更多的控制选项，如速度曲线、延迟时间、循环次数等，适合实现复杂的动画效果。

三、应用场景与示例

1. transition应用场景

   • 适用于需要简单平滑过渡效果的场景，如按钮悬停效果、图片缩放效果等。
   • 示例代码：

   div {
     width: 100px;
     height: 100px;
     transition: transform 2s;
   }
   div:hover {
     transform: rotate(180deg);
   }
   

2. animation应用场景

   • 适用于需要复杂动画效果的场景，如轮播图动画、加载动画等。
   • 示例代码：

   @keyframes myAnimation {
     0% { left: 0; transform: rotate(0); }
     100% { left: 200px; transform: rotate(180deg); }
   }
   div {
     animation: myAnimation 5s infinite;
   }
   

综上所述，CSS3中的transition和animation各有其独特的优势和适用场景。transition适合实现简单的平滑过渡效果，而animation则更适合实现复杂的动画效果。在选择使用哪种动画方式时，应根据具体需求和场景进行权衡。