介绍
CSS 动画是一种在网页中创建动态效果的技术，可以让元素在页面上以一种流畅的方式移动、变形或渐变。animation 属性用于定义动画效果的关键帧和持续时间等参数。
语法
---------- ---- -------- --------------- ----- --------------- --------- --------- -----------
- name：定义动画的名称，通常是通过 @keyframes 定义的关键帧动画。
- duration：定义动画播放的持续时间，单位可以是秒（s）或毫秒（ms）。
- timing-function：定义动画的时间函数，用于控制动画的速度曲线，常见的值有 ease、linear、ease-in、ease-out 等。
- delay：定义动画开始之前的延迟时间，单位可以是秒（s）或毫秒（ms）。
- iteration-count：定义动画播放的次数，可以是一个数字或 infinite（无限循环）。
- direction：定义动画播放的方向，可以是 normal（正向播放）、reverse（反向播放）或 alternate（交替播放）。
- fill-mode：定义动画在播放之前和之后如何应用样式，常见的值有 none、forwards、backwards、both。
- play-state：定义动画的播放状态，可以是 running（播放）或 paused（暂停）。
示例
---------- ------- -
---- -
---------- ------------------
-
-- -
---------- --------------
-
-
-------- -
---------- ------- -- ----------- -- -------- --------- -------- --------
-在上面的示例中，我们定义了一个名为 slidein 的关键帧动画，使元素从左侧滑入页面。然后将该动画应用于一个元素，并指定了动画的持续时间为 2 秒，时间函数为 ease-in-out，延迟 1 秒开始播放，循环播放并保持最后一帧的样式。
总结
CSS 的 animation 属性可以帮助我们创建各种动态效果，通过设置不同的参数，可以实现丰富多彩的动画效果。熟练掌握 animation 属性的使用，可以让我们的网页更加生动和吸引人。