深入浅出 CSS 动画的方方面面，了解 CSS 动画语法及属性用法

2024-01-14 01:08:37

CSS 动画是一种用于创建动画效果的 CSS 技术。它允许您在网页上创建动画，而无需使用 JavaScript 或其他编程语言。CSS 动画使用关键帧来定义动画效果，这些关键帧指定了动画在特定时间点的外观。

CSS 动画语法

CSS 动画的语法如下：

@keyframes animation-name {
  from {
    animation-property: value;
  }

  to {
    animation-property: value;
  }
}

.element {
  animation-name: animation-name;
  animation-duration: duration;
  animation-timing-function: timing-function;
  animation-delay: delay;
  animation-iteration-count: count;
  animation-direction: direction;
  animation-fill-mode: fill-mode;
}

CSS 动画属性

CSS 动画的属性如下：

animation-name：指定动画的名称。
animation-duration：指定动画的持续时间。
animation-timing-function：指定动画的计时函数。
animation-delay：指定动画的延迟时间。
animation-iteration-count：指定动画的迭代次数。
animation-direction：指定动画的方向。
animation-fill-mode：指定动画在动画开始和结束时如何填充元素。

CSS 动画进阶用法

CSS 动画可以与其他 CSS 属性结合使用，以创建更复杂的动画效果。例如，您可以使用 animation-delay 属性来创建延迟动画，或者使用 animation-iteration-count 属性来创建无限循环动画。

CSS 动画实例

以下是一些 CSS 动画的实例：

淡入淡出动画：

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.element {
  animation-name: fade-in;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

滑动动画：

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.element {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

旋转动画：

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

  to {
    transform: rotate(360deg);
  }
}

.element {
  animation-name: rotate;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}