最浅显易懂的 CSS 之 transform - 05 - 动画动画动画

2024-01-18 06:58:54

CSS 的 transform 属性不仅可以用于简单的元素变换，还可以用来创建复杂的动画效果。本文将介绍 transform 动画的语法和使用方法，并提供一些生动的示例来展示它的强大功能。

1. transform 动画语法

CSS transform 动画的语法如下：

@keyframes 动画名称 {
  from {
    transform: 初始状态;
  }
  to {
    transform: 最终状态;
  }
}

元素 {
  animation: 动画名称 时间 线性/缓动/无 时间延迟 正常/反转/交替/交替反转 无限;
}

@keyframes 定义了一个动画的各个阶段。
from 和 to 定义了动画的开始和结束状态。
animation 属性应用动画到元素上。
时间 指定动画的持续时间。
线性/缓动/无 指定动画的过渡效果。
时间延迟 指定动画的延迟时间。
正常/反转/交替/交替反转 指定动画的播放方向。
无限 指定动画是否无限循环。

2. transform-origin

transform-origin 属性指定了元素变换的原点，即变换相对于元素的哪个点进行。默认情况下，原点是元素的中心点。可以通过设置 transform-origin 属性来改变原点的位置。

3. CSS transition

CSS transition 是 transform 动画的一种简化形式，它允许元素在特定时间内从一种状态平滑过渡到另一种状态。transition 语法的格式如下：

元素 {
  transition: transform 时间 线性/缓动/无 时间延迟;
}

4. 实例

下面是一些生动的示例，展示了 transform 动画的强大功能：

元素旋转动画：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

元素 {
  animation: rotate 5s infinite;
}

元素平移动画：

@keyframes translate {
  from {
    transform: translate(0px, 0px);
  }
  to {
    transform: translate(100px, 100px);
  }
}

元素 {
  animation: translate 3s infinite;
}

元素缩放动画：

@keyframes scale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}

元素 {
  animation: scale 2s infinite;
}

元素倾斜动画：

@keyframes skew {
  from {
    transform: skew(0deg, 0deg);
  }
  to {
    transform: skew(10deg, 10deg);
  }
}

元素 {
  animation: skew 3s infinite;
}

元素变形动画：

@keyframes deform {
  from {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  to {
    transform: matrix(1.2, 0.1, -0.1, 1.2, 0, 0);
  }
}

元素 {
  animation: deform 3s infinite;
}