一、动画
动画与过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生改变的时候才会触发，动画可以自动触发动态效果。设置动画效果必须先设置一个关键帧。关键帧设置了动画执行的每一个步骤。
<!DOCTYPE html>
<html>
<head>
<title>动画</title>
<meta charset="UTF-8">
<style>
.box1{
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
margin-top: 100px;
/* 设置box2动画 */
/* animation-name：要对当前元素生效的关键帧的名字 */
animation-name: identifier;
/* animation-duration：动画的执行时间 */
animation-duration: 2s;
/* animation-delay：动画的延迟 */
animation-delay: 2s;
/* animation-timing-function：动画的时序函数 */
animation-timing-function: linear;
/*
animation-iteration-count：动画的执行次数
- 可选值：
- 自定义一个次数
- infinite：无限执行
*/
animation-iteration-count: 3;
/*
animation-direction：指定动画运行的方向
- 可选值：
- normal：默认值，从from到to运行，每次都是这样
- reverse：从to向from运行，每次都是这样
- alternate：从from到to运行，重复执行动画时反向执行
- alternate-reverse：从to向from运行，重复执行动画时反向执行
*/
animation-direction: alternate;
/*
animation-play-state：设置动画的执行状态
- 可选值：
- runing：默认值。动画执行
- paused：动画停止
*/
/*animation-play-state: paused;*/
/*
animation-fill-mode；动画的填充模式
- 可选值：
- none：默认值，元素执行完毕回到原来的位置
- forwards：动画执行完毕，元素会停止在动画结束的位置
- backwards：动画延迟等待时，元素就会处于开始位置
- both：结合了forwards和backwards
*/
animation-fill-mode: both;
/*
animationn：可以同时设置动画相关的所有属性
- 如果写延迟，则两个时间中第一个是持续时间，第二个是延迟
*/
animation: identifier 3s 2s 3 alternate both;
}
@keyframes identifier {
/* from表示动画的开始位置，也可以使用0%表示 */
from{
margin-left: 0;
background-color: aqua;
}
/* to表示动画的结束位置，也可以使用100% */
to{
margin-left: 700px;
background-color: pink;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>动画</title>
<meta charset="UTF-8">
<style>
.box1{
width: 111px;
height: 136px;
background-image: url("./image/小哆咪.png");
animation: rain 1s steps(4) infinite alternate;
}
@keyframes rain {
/* from表示动画的开始位置，也可以使用0%表示 */
from{
background-position: 0 0;
}
/* to表示动画的结束位置，也可以使用100% */
to{
background-position: -444px 0;
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>