CSS3-animation动画属性

最新推荐文章于 2025-05-28 16:06:45 发布

原创最新推荐文章于 2025-05-28 16:06:45 发布 · 581 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html进阶 #css3 #新手 #菜鸟

HTML5+CSS3 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨CSS动画原理，讲解如何使用@keyframes定义关键帧动画，掌握animation属性如duration、timing-function等，实现元素状态变化，包括从开始到结束的全过程。并通过实例演示动画效果。

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

animation 动画

@keyframes 关键帧动画

先用@keyframes预先定义好元素在整个过程中要经历的状态，然后再通过animation调用动画。

动画状态

from 动画开始
to 动画结束
也可以用百分比%表示，例如0%、50% 、75%、100%，实际开发中用%较多。
代码演示：

animaition 常用属性

animaition 常用属性	属性值
`animation-name` 动画名称
`animation-duration` 动画持续时间	0.5s/1s
`animation-timing-function` 动画运动曲线	`linear`匀速、 `ease`慢-快-慢（默认）
`animation-delay` 延迟时间	0.5s/1s
`animation-iteration-count:` 循环次数	可跟数字：1,2；`infinite` 无限循环
`animation-fill-mode` 动画结束状态	`forwards` 停留在 100% 的样式；`backwards` 停留在 0% 的样式
`animation-play-state` 播放/ 暂停
`animation-name` 动画名称	`running`播放；`paused`暂停

animaition 属性复合写法：

animation: name duration timing-function delay iteration-count direction fill-mode;
动画：名称持续时间运动曲线演示循环次数动画结束时候的状态

注意：

animation-play-state不能使用复合写法，要单独写。
多个动画写法，用逗号，隔开

总结

动画代码案例演示：

    /* 1 声明动画函数 */
    @keyframes ani_div {
  0%{
    width: 100px;
    background-color: red;
  }
  50%{
    width: 150px;
    background-color: green;
  }
  100%{
    width: 300px;
    height: 300px;
    background-color: yellow;
  }
}

div {
  width: 200px;
  height: 200px;
  background-color: aqua;
  margin: 100px auto;
  /* 2 调用动画 */
  animation-name: ani_div;
  /* 持续时间 */
  animation-duration: 2s;
}