CSS3与动画有关的属性transition、animation、transform对比（史上最全版）

CSS3动画属性——transition、animation和transform

1. 属性简介

CSS3中的 transition、animation和transform 属性可以帮助我们实现各种动画效果

transition

transition 是CSS3的一个过渡属性，用来指定一个 CSS 属性应该在什么时候进行变换，以何种方式进行变换。属性包括 transition-property、transition-duration、transition-timing-function 和 transition-delay。

• transition-property：指定一个或多个 CSS 属性，用以指定效果的应用对象。
• transition-duration：过渡效果的持续时间。
• transition-timing-function：过渡效果的时间函数，即动画变化的计算方式。
• transition-delay：过渡效果的延迟时间，即效果开始之前的等待时间。

animation

animation 是CSS3的另一个动画属性，用于在元素上定义一套动画。属性包括 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state 和 animation-fill-mode。

• animation-name：定义动画的名称。
• animation-duration：定义一个周期动画的时间（秒或毫秒）。
• animation-timing-function：指定动画过渡效果的时间曲线函数。
• animation-delay：动画的等待时间。
• animation-iteration-count：定义动画运行次数。
• animation-direction：定义动画的运动方向。
• animation-play-state：定义动画的播放状态。
• animation-fill-mode：指示元素在不在动画播放时间段内如何定位。

transform

transform 属性可以实现一些简单的变换效果。由于支持的功能比较少，因此只能实现一些普通的效果，如移动、旋转、缩放和倾斜等。属性包括 rotate、translate、scale 和 skew 四个属性。

• rotate：定义一个元素顺时针旋转的角度。
• translate：定义元素移动的距离、方向和方式。
• scale：定义元素的缩放比例。
• skew：定义元素的倾斜变换。

2. 属性对比

2.1 transition 和 animation 的对比

• 相同点

transition 和 animation 都可以实现元素的动画效果。

• 不同点

transition 是在 CSS 属性发生变化时触发的，而 animation 是自动循环播放动画效果的。通常情况下，transition 更适合制作简单的动画，而 animation 则适合制作复杂的动画。

2.2 transform 和 animation 的对比

• 相同点

transform 和 animation 都可以实现元素的动画效果。

• 不同点

transform 只能实现简单的变换效果，如移动、旋转、缩放和倾斜等，而 animation 可以实现复杂的动画效果，如 fadeIn、fadeOut 等。

3. 示例说明

3.1 transition 属性的示例

<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s; /* 过渡时长 */
  }

  #box:hover {
    width: 200px;
  }
</style>

<div id="box"></div>

上面的示例中，当鼠标悬停在红色的方块上时，方块的宽度会从 100px 平滑地过渡到 200px，过渡时间为 2 秒。这个过渡效果就是通过 transition 属性实现的。

3.2 animation 属性的示例

<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: mymove 5s infinite; /* 动画名称、动画时长、动画循环模式 */
  }

  @keyframes mymove { /* 定义动画 */
    from {top: 0px;} /* 初始位置 */
    to {top: 200px;} /* 结束位置 */
  }
</style>

<div id="box"></div>

上面的示例中，当页面加载完成后，红色的方块会向下移动 200px，然后重新回到原来的位置，不停地上下移动。这个动画效果就是通过 animation 属性实现的。

4. 总结

transition 和 animation 属性用于实现元素的动画效果，可以实现不同的效果。transform 属性可以实现简单的变换效果，比如移动、旋转、缩放和倾斜等。有了这些属性，我们就可以轻松实现各种各样的动画效果，使网页变得更加生动和有趣。