1、动画
动画animation是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
2、动画的基本使用
1、先定义动画
2、在使用动画
2.1 定义动画keyframes
2.1.1 动画序列
- 0%是动画的开始，100%是动画的结束，范围是0-100。这样的规则就是动画序列
- 在@keyframes中规定某些CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变为另一种样式的效果 。可以改变任意多的样式，任意多的次数
- 要用百分比规定变化发生的时间，或用关键词“from"和”to"，等同于0%和100%
2.1.2 语法
/*动画名称是自己取得*/
@keyframes 动画名称{
/*开始状态*/0%{width:100px;}
/*结束状态*/100%{width:200px;}
}
2.2 元素使用动画
2.2.1 语法
div{/*调用动画*/animation-name:动画名称;/*持续时间,单位是秒s*/animation-duration:持续时间;
}
练习1：
打开页面，盒子就从左边走到右边
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@keyframes moving{0%{transform:translateX(0);}100%{transform: translate(300px);}}div{width: 100px;height: 100px;background-color: orange;animation-name: moving;animation-duration: 2s;}</style>
</head>
<body><div></div>
</body>
</html>
动画1
练习2：
设置动画多个状态，盒子转一圈回到原点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@keyframes move{0%{transform:translate(0);}25%{transform: translate(1000px,0);}50%{transform: translate(1000px,400px);}75%{transform: translate(0,400px);}100%{transform: translate(0,0);}}div{width: 100px;height: 100px;background-color: orange;/*动画名称*/animation-name: move;/* 持续时间 */animation-duration: 10s;}</style>
</head>
<body><div></div>
</body>
</html>
动画2
练习3：波纹放大
opacity:透明度属性0-完全透明 1.0完全不透明
position：定位
box-shadow:阴影
animation:pulse 1.2s linear infinite
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.map {width: 100%;height: 616px;background: url(../images/map.webp) no-repeat;}.city {position: absolute;top: 381px;left: 721px;color: #fff;}.dotted {width: 8px;height: 8px;border-radius: 50%;background-color: orange;}.city div[class^="wave"] {width: 8px;height: 8px;box-shadow: 0 0 12px rgb(229, 197, 137);position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 50%;animation: wave 1.2s linear infinite;}.city div.wave2{animation-delay: 0.4s;}.city div.wave3{animation-delay: 0.8s;}@keyframes wave{0%{}70%{width: 40px;height: 40px;opacity: 1;}100%{width: 80px;height: 80px;opacity: 0;}}</style>
</head><body><div class="map"><div class="city"><!-- city没有设置宽带高度，所以dotted就是city的大小 --><div class="dotted"></div><div class="wave1"></div><div calss="wave2"></div><div class="wave3"></div></div></div></body></html>
动画3波纹效果
2.3 动画的属性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@keyframes move {0% {transform: translate(0);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 400px);}75% {transform: translate(0, 400px);}100% {transform: translate(0, 0);}}div {width: 100px;height: 100px;background-color: orange;/*动画名称*/animation-name: move;/* 持续时间 */animation-duration: 10s;/* 何时开始 */animation-delay: 1s;/* 运动曲线 */animation-timing-function: ease;/* 循环播放次数,默认是1，无限infinite */animation-iteration-count: 2;/* 是否反方向播放：默认是normal,反方向写alternate循环播放次数必须设置大于1才可以看到反向效果 */animation-direction: alternate;/* 动画结束后的状态：默认是backwards回到起始状态，可以停留在结束状态forwards */animation-fill-mode: forwards;}/* 鼠标经过，动画停止 */div:hover {/* 规定动画是否正在运行或暂停，默认是running,暂停是paused */animation-play-state: paused;}</style>
</head><body><div></div>
</body></html>
动画属性简写
前两个属性（动画名称 持续时间）一定要写，其余可以省略
简写属性里不包括animation-play-state，要用的话得单独写
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
animation: move 5s linear 2s infinate alternate;
速度曲线细节
animation-timimg-function:规定动画的速度曲线，默认是ease
| 值 | 描述 |
|---|---|
| linear | 匀速 |
| ease | 默认。低速开始-然后加快-结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps() | 指定了时间函数中的间隔数量（步长） |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 0;height: 30px;font-size: 20px;background-color: orange;white-space: nowrap;overflow: hidden;animation-name: change;animation-timing-function: steps(10);animation-duration: 4s;animation-fill-mode: forwards;}@keyframes change{0%{width: 0;}100%{width: 200px;}}</style>
</head>
<body><div>我们一个家名字叫中国</div>
</body>
</html>
动画3步长
练习：极光下奔跑的熊
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0}body {width: 100%;height: 550px;background: url(../images/media/bg2.png) repeat-x 0 100px;background-color: #e6eef0;vertical-align: middle;animation: mountain 8s linear forwards infinite;}.mountain{position: relative;top:200px;left: 0;width: 100%;height: 330px;background: url(../images/media/bg1.png) repeat-x 0 100px;/* background-color: #ccc; */vertical-align: middle;animation: mountain 8s linear forwards infinite;}div {position: absolute;width: 200px;height: 100px;top: 220px;background: url(../images/media/bear.png);animation: bear 1s infinite steps(8), run 3s forwards;}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes run {0% {left: 0;}100% {left: 50%;transform: translate(-50%, 0);}}@keyframes mountain {0% {background-position: 0;}100% {background-position: -3840px 0;}}</style>
</head><body><div class="mountain"><div></div></div></body></html>
奔跑的熊
