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>
ps:运行代码,结合实际效果,更容易的掌握各个属性的作用,以及各个属性值的含义。