css动画animation属性
时间:2026-06-07 01:42:38 出处:热点阅读（143）
本文将详细的属性讲解如何正确的学习css动画样式的布局，css给我们新增加了很多的属性样式，动画的属性能够使我们的网页更新有活力，所以本文将详细的属性介绍animation属性以及他的使用技巧。
1.动画调用
(1) 什么是属性动画
动画是 CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的属性控制一个或者一组动画，从而实现复杂的属性动画效果
(2) 动画的基本使用
先定义动画
在调用定义好的动画
(3) 语法格式(定义动画)
(4)代码演示
@keyframes move { 0% { width: 100px; } 100% { width: 200px } } div { /* 调用动画 起的类名*/ animation-name: move; /* 持续时间 */ animation-duration: 1s； } |
2.动画属性
属性 | 描述 |
@keyframes | 规定动画。 |
animation | 所有动画属性的简写属性，除了animation-play-state属性。属性 |
animation-name | 规定@keyframes动画的名称。(必须的属性) |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是属性0。（必须的属性) |
animation-timing-function | 规定动画的速度曲线，默认是属性“ease”。 |
animation-delay | 规定动画何时开始，默认是0。1s |
animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite（无限循环） |
animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal ",alternate逆播放 |
animation-play-state | 规定动画是否正在运行或暂停。默认是"running",还有"paused"。 |
animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
3.代码演示
div { width: 100px; height: 100px; background-color: aquamarine; /* 动画名称 */ animation-name: move; /* 动画花费时长 */ animation-duration: 2s; /* 动画速度曲线 */ animation-timing-function: ease-in-out; /* 动画等待多长时间执行 */ animation-delay: 2s; /* 规定动画播放次数 infinite: 无限循环 */ animation-iteration-count: infinite; /* 是否逆行播放 */ animation-direction: alternate; /* 动画结束之后的状态 */ animation-fill-mode: forwards; } div:hover { /* 规定动画是否暂停或者播放 */ animation-play-state: paused; } |
上一篇： 什么是营养过剩?肥胖是因为营养过剩吗