CSS3 animation（动画） 属性

介绍

CSS 动画是一种在网页中创建动态效果的技术，可以让元素在页面上以一种流畅的方式移动、变形或渐变。animation 属性用于定义动画效果的关键帧和持续时间等参数。

语法

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

• 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 属性的使用，可以让我们的网页更加生动和吸引人。