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

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

1. transition属性

transition属性是CSS3新特性，用于设定样式过渡效果，在原样式和新样式之间添加过渡动画。它需要指定过渡的属性、过渡的时间以及过渡的方式。过渡的属性可以是任意一个CSS属性，过渡时间可以是秒或毫秒，过渡方式可以是线性的、缓动的、三次贝塞尔曲线等。

1.1 基本语法

transition: property duration timing-function delay;

其中，

• property是需要过渡的样式属性。例如，background-color、transform、box-shadow等。
• duration是过渡动画的时间，可以使用秒或毫秒计数，例如2s或1000ms。
• timing-function是过渡效果的变换速度，如ease、linear、ease-in、ease-out、ease-in-out等预设值，以及贝塞尔曲线。
• delay是设定延迟执行过渡动画的时间，可以使用秒或毫秒计数，例如1s或500ms。

1.2 示例说明

如下面的代码，当鼠标滑过 <div> 元素时，它的背景色将会从白色变为黑色，时长为1秒：

div {
  background-color: white;
  transition: background-color 1s;
}
div:hover {
  background-color: black;
}

2. animation属性

animation是CSS3新特性之一，用于设定关键帧动画。它可以定义一个动画周期内的所有动作，并让浏览器将这些动作动起来，实现更加复杂的动画效果。在使用 animation 属性时，需要指定动画名称、持续时间、动画速度曲线等；另外，还需要定义关键帧，即动画进行到某个百分比时的具体表现形式。

2.1 基本语法

animation: name duration timing-function delay iteration-count direction fill-mode;

其中，

• name是指定动画的名称。@keyframes 规则用于指定动画中不断变化的样式，这个名称要跟 @keyframes 规则的名称对应。
• duration是动画周期的时长，可以使用秒或毫秒计数，例如2s或1000ms。
• timing-function是过渡效果的变换速度，如ease、linear、ease-in、ease-out、ease-in-out等预设值，以及贝塞尔曲线。
• delay是设定动画延迟执行的时间，可以使用秒或毫秒计数，例如1s或500ms。
• iteration-count是设定动画的重复次数，可以设定为具体的次数，或者infinite表示无限循环。
• direction是设定动画的播放方向，如normal、reverse、alternate、alternate-reverse。
• fill-mode是设定在动画结束后，元素保持动画最后一帧的状态，可以包括none、forwards、backwards、both等。

2.2 示例说明

下面的代码展示了使用 animation 属性来实现一个永远旋转的圆形， CSS3 中提供了两种创建圆形的方法，一是用 border-radius 创建一个圆形，二是用 transform 的 scale 缩放样式创建一个圆形。

.circle1 {
  width: 200px;
  height: 200px;
  background: #44B78B;
  border-radius: 50%;
  animation: rotate1 2s linear infinite;
}
@keyframes rotate1 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.circle2 {
  width: 200px;
  height: 200px;
  background: #44B78B;
  transform: scale(1);
  animation: rotate2 2s linear infinite;
}
@keyframes rotate2 {
  from {
    transform: rotate(0) scale(1);
  }
  to {
    transform: rotate(360deg) scale(1);
  }
}

3. transform属性

CSS3的 transform 属性用于元素的变形，可以将元素做平移、旋转、缩放等操作。它最重要的特点是在不改变元素自身原有格式的情况下，对其进行变形。

3.1 基本语法

transform: none|transform-functions;

其中，

• none 表示不进行任何变形。
• transform-functions 表示进行一系列变形操作，可以使用多个值同时作用于同一个元素。

3.2 示例说明

下面的代码展示了如何使用 transform 属性对一个 div 元素做平移和旋转。

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(50px, 50px) rotate(45deg);
}

如上述代码中所示，当应用 translate 和 rotate函数时，元素将沿着 X 和 Y 轴方向平移并旋转。