css动画（animation）常用属性

最新推荐文章于 2025-03-08 19:23:37 发布

余道各努力，千里自同风

最新推荐文章于 2025-03-08 19:23:37 发布

阅读量888

点赞数

文章标签： css 动画 html

本文链接：https://blog.csdn.net/m0_70547044/article/details/130886666

版权

本文详细介绍了CSS3中用于创建动画的关键属性，包括animation-name、@keyframes、animation-duration、animation-delay、animation-iteration-count、animation-direction、animation-timing-function、animation-fill-mode和animation-play-state。这些属性组合使用，可以实现丰富多样的网页动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.animation-name：动画名称

2.@keyframes：动画定义，后面跟动画名称

3.animation-duration：动画持续时长，单位（s）

4.animation-delay:动画延时生效，单位（s）；可为负值，当为负值时候，应解读为已播放n秒
      如：-2s表示动画已播放2s，从2s后开始播放

5.animation-iteration-count：动画运行次数，参考值有：infinite（无限循环）

6.animation-direction：动画运行方向规则：参考值有：
① normal（正常播放，默认值），
    ② reverse （反向），
    ③ alternate （先正向，后反向，交替），
    ④ alternate-reverse（先反向，后正向，交替）

7.animation-timing-function：动画运行曲线，参考值有：
      ① ease ：慢-快-慢
      ② linear ：匀速运动
      ③ ease-in：慢进
      ④ ease-out：慢出
      ⑤ ease-in-out ：慢进慢出
      ⑥ cubic-bezier(n,n,n,n)：用贝塞尔函数自定义动画运行曲线

8.animation-fill-mode：动画填充模式：
   ① none :默认值，不应用任何样式
   ② forwards ：应用动画最后一个关键帧的样式值
   ③ backwards：应用动画第一个关键帧的样式值，并在动画延迟期间保留该值。
   ④ both 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性

9.animation-play-state：动画运行或者暂停
    ① paused：暂停
    ② running：播放

10.animation：集合6种动画简写属性，顺序：动画名称，运行时长，运行曲线，延时，运行次数，运行方向规则