CSS - @Keyframes

一、@keyframes定义

@keyframes是 CSS 中的一个规则，用于创建动画。它允许你定义动画的各个阶段，也就是关键帧。通过指定不同的关键帧，你可以控制元素在动画过程中的样式变化。

二、语法结构

基本语法如下：

@keyframes animation - name {
  from {
    /* 动画开始时的样式 */
  }
  to {
    /* 动画结束时的样式 */
  }
}

  - 这里`animation - name`是自定义的动画名称，`from`代表动画的起始状态，`to`代表动画的结束状态。你也可以使用百分比来更精细地定义关键帧，例如：
     - ```css
       @keyframes slide - in {
         0% {
           transform: translateX(-100%);
         }
         50% {
           transform: translateX(50%);
         }
         100% {
           transform: translateX(0);
         }
       }

在 这个例子中，slide - in动画有三个关键帧，分别在动画的 0%（开始）、50%（中间）和 100%（结束）阶段定义了元素的transform属性的变化。

三、与动画属性配合使用

定义号@keyframes动画后，需要将其应用到元素上。这可以通过animation属性来实现。例如：

div {
  animation: slide - in 3s ease - in - out;
}

 这里animation属性的值包括动画名称（slide-in）、动画持续时间（3s）和动画的时间函数   （ease - in - out）