CSS3动画（Animation）允许你创建更复杂和自定义的动态效果。与过渡不同，动画可以定义一系列关键帧（Keyframes），在这些关键帧中指定元素的状态，以及每一帧之间的过渡效果。以下是CSS3动画的基本用法：
/* 基本语法 */
@keyframes animation-name {
  from {
    /* 初始状态 */
  }

  to {
    /* 结束状态 */
  }

  /* 或者使用百分比定义关键帧 */
  0% {
    /* 初始状态 */
  }

  50% {
    /* 中间状态 */
  }

  100% {
    /* 结束状态 */
  }
}

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

  •  animation-name（动画名称）： 指定关键帧的名称。

  •  duration（持续时间）： 动画的持续时间，以秒（s）或毫秒（ms）为单位。

  •  timing-function（缓动函数）： 动画的缓动函数，控制变化的速度。

  •  delay（延迟）： 可选，指定动画开始之前的延迟时间。

  •  iteration-count（循环次数）： 动画的循环次数，可以使用数字或关键词（如 infinite）。

  •  direction（方向）： 动画的播放方向，可选值有 normal（正向）、reverse（反向）、alternate（交替正反向播放）等。

  •  fill-mode（填充模式）： 动画在非活动时间段的样式，可选值有 forwards、backwards、both、none。


示例：
/* 定义动画关键帧 */
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

/* 应用动画到元素 */
.element {
  animation: slide-in 1s ease-out 0s 1 normal forwards;
}

这是一个简单的例子，定义了一个从左侧滑入的动画，并将其应用到元素上。动画在1秒内以缓动函数ease-out的方式播放，并在动画结束后保持最终状态。

你也可以使用百分比来定义关键帧，以实现更精细的控制。动画提供了更大的灵活性，可以实现更复杂的交互效果。


转载请注明出处：http://www.zyzy.cn/article/detail/4065/CSS