第十二讲_css动画

css动画

1. 动画介绍
2. 动画的基本使用
- 2.1 定义关键帧（方式一）
- 2.2 定义关键帧（方式二）
- 2.3 给元素使用动画
3. 动画的其他属性
4. 动画示例

1. 动画介绍

动画使元素逐渐从一种样式变为另一种样式。
使用 CSS 动画，您必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。

2. 动画的基本使用

2.1 定义关键帧（方式一）

使用关键字 from 和 to定义。

/* 定义动画 */
@keyframe 动画名 {/* 第一帧 */from {/* css属性设置 */}/* 最后一帧 */to {/* css属性设置 */}
}

2.2 定义关键帧（方式二）

使用百分比定义，可以设置更多的关键帧，让动画更加流畅和逼真。

/* 定义动画：方式二 */
@keyframe 动画名 {/* 第一帧 */0% {/* css属性设置 */}20% {}/* 最后一帧 */100% {/* css属性设置 */}
}

2.3 给元素使用动画

选择器 {/* 指定动画名 */animation-name: 动画名;/* 动画持续的时间 */animation-duration: 5s;/* 动画的延迟时间 */animation-delay: 1s;
}

3. 动画的其他属性

animation-timing-function：设置动画的速度曲线
- 其取值与过渡的transition-timing-function一致，可以查看另一片博文：过渡（transition）
animation-itaration-count：设置动画的次数
- n：指定具体的次数，默认为1
- infinite：无限次循环
animation-direction：设置动画的方向（动画次数为1，该属性无效）
- normal：正常播放，默认值
- alternate：轮流反向播放，在奇数次数正常播放，而在偶数次数向后播放
animation-fill-mode：设置动画在播放之前或之后，其动画效果是否可见
- none：不改变默认行为
- forwards：当动画完成后，保持最后一帧
- backwards：在 animation-delay 所指定的一段时间内，显示第一个关键帧
- both：forwards 和 backwards 都被应用
anamation-play-state：设置动画播放状态
- paused：动画已暂停
- running：动画正在播放

4. 动画示例

<html><style>@keyframes animal {0% {height: 100px;width: 100px;background-color: pink;}50% {background-color: blue;transform: translateX(400px);}100% {transform: translateX(900px);background-color: blueviolet;}}.container {width: 1000px;height: 100px;border: 1px black solid;}.child {height: 100px;width: 100px;background-color: red;border-radius: 50px;/* 指定动画的名称 */animation-name: animal;/* 指定动画持续的时间 */animation-duration: 5s;/* 指定动画延迟的时间 */animation-delay: 1s;animation-fill-mode: both;animation-iteration-count: infinite;animation-direction: alternate;}</style><div class="container"><div class="child"></div></div></html>