css: transform、transition、animation 区别

transform

定义：转换结果，表示一个进行相应转换效果后的一个状态/帧。
常用值：
- translate(x, y)：平移元素，x 和 y 代表水平和垂直的移动距离。
- rotate(angle)：旋转元素，angle 代表旋转的角度。
- scale(x, y)：缩放元素，x 和 y 代表水平和垂直方向的缩放比例。
- skew(x, y)：倾斜元素，x 和 y 代表水平方向和垂直方向的倾斜角度。

示例：

.box {
  transform: translate(10px, 20px) rotate(45deg) scale(1.5);
}

transition

定义：过渡方式，表示从一个状态向另一个状态变化/过渡过程中的变化方式。它不关心前后两个状态是怎样的，只规定变化过程是怎么进行的。
常用值：
- transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。
- transition-duration: 指定过渡效果持续的时间，以秒或毫秒为单位。
- transition-timing-function: 指定过渡效果的速度曲线。它可以是 linear（线性）、ease（渐入渐出）、ease-in（渐入）、ease-out（渐出）、ease-in-out（先渐入后渐出）等等。
- transition-delay: 指定过渡效果开始之前的延迟时间，以秒或毫秒为单位。

示例

/* 对所有属性都应用过渡效果 */
.element {
  transition: all 0.3s ease;
}

/* 对指定属性（颜色）应用过渡效果 */
.element {
  transition: color 0.3s ease-in-out;
}

animation

定义: 动画，规定了若干个关键帧，以及帧与帧之间的过渡方式。
常用参数：
- animation-name：指定所使用的动画名称（对应定义的 @keyframes）。
- animation-duration：指定动画的持续时间。
- animation-timing-function：指定动画的速度曲线。
- animation-delay：指定动画效果的延迟时间。
- animation-iteration-count：指定动画的循环次数。
- animation-direction：指定动画的播放方向（如 normal、reverse 等）。

示例

@keyframes example {
  from { transform: translateY(0); }
  to { transform: translateY(100px); }
}

.box {
  animation: example 2s infinite alternate;
}

本文由 holwell 原创，采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。