css animation属性

CSS animation属性用于创建动画效果。它允许您定义一个动画序列，该序列将在指定的时间内逐渐改变元素的样式。您可以使用CSS关键帧来定义动画的开始和结束状态，以及中间的状态，以创建复杂的动画效果。以下是一个示例CSS动画属性的语法：

animation: name duration timing-function delay iteration-count direction fill-mode;

其中，各个属性的含义如下：

- name：动画名称，定义在@keyframes规则中。
- duration：动画持续时间，以秒（s）或毫秒（ms）为单位。
- timing-function：动画的时间函数，用于定义动画的加速度和减速度。
- delay：动画延迟时间，以秒（s）或毫秒（ms）为单位。
- iteration-count：动画重复次数，可以是一个具体的数字或infinite（无限循环）。
- direction：动画的播放方向，可以是normal（正向播放）或reverse（反向播放）。
- fill-mode：动画结束后元素的样式，可以是none（不改变），forwards（保持最后一帧的样式），backwards（使用第一帧的样式）或both（同时保持第一帧和最后一帧的样式）。

示例代码：

/* 定义动画序列 */
@keyframes example {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

/* 应用动画属性 */
div {
  animation: example 3s ease-in-out 1s infinite alternate;
}

这将创建一个名为example的动画序列，它将在3秒钟内逐渐将元素的背景颜色从红色变为绿色，并在1秒后开始播放。它将在infinite（无限循环）模式下播放，并在每次播放结束时反转动画方向。