css3语法中关于@keyframes属性介绍

animation是CSS3实现的动画效果。可以通过设置关键帧keyframes来定义动画过程中的参数变化，从而实现各种复杂的动画效果。

keyframes动画示例

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.slide {
   animation: slide-in 1s ease-out;
}

keyframes属性介绍

1. animation-name（动画名称）：指定要应用的@keyframes规则的名称。
2. animation-duration（持续时间）：指定动画持续的时间，以秒或毫秒为单位。
3. animation-timing-function（计时函数）：指定动画变化速度的计时函数。常见的值包括ease、linear、ease-in、ease-out、ease-in-out等。
4. animation-delay（延迟时间）：指定动画开始前的延迟时间，以秒或毫秒为单位。
5. animation-iteration-count（重复次数）：指定动画重复播放的次数，可以使用数字或关键字infinite表示无限重复。
6. animation-direction（播放方向）：指定动画的播放方向，包括normal（正向播放）、reverse（反向播放）和alternate（交替播放）。
7. animation-play-state（播放状态）：指定动画的播放状态，包括running（运行）和paused（暂停）。
8. animation-fill-mode（填充模式）：指定动画结束后元素应该如何填充，包括none、forwards、backwards和both等。