CSS动画相关属性
动画（animation）是CSS3中最具颠覆性的特征之⼀，可通过设置多个节点来精确控制⼀个或⼀组动画，常⽤来实现复杂的动画效果。相⽐较过渡，动画可以实现更多变化，更多控制，连续⾃动播放等效果。
2.1动画的基本使⽤
制作动画分两步
1.先定义动画
2.再使⽤（调⽤）动画
1.⽤keyframes定义动画（类似定义类选择器）
语法：
@keyframes xuanzhuan{
/*开始状态 */
0%{
transform:translateX(0px);
}
/* 结束状态 */
100%{
transform:translateX(1000px);
}
}
1.0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
2.在@keyframes中规定某项CSS样式，就能创建由当前样式主键改变为新样式的动画效果。
3.动画使元素从⼀种样式逐渐变化为另⼀种样式的效果，你可以任意改变多的样式任意多的参数
孔子的仁
4.请⽤百分⽐来规定变化发⽣时间，或⽤关键词"from"和"to"，等同于"0%“到"100%”
2.元素使⽤动画
语法：
/* 调⽤动画跟动画名称 */
animation-name: xuanzhuan;
/* 持续时间 */
animation-duration: 5s;
拓印画教案
动画序列：可以做多个状态的变化，keyframe 关键帧
⾥⾯百分⽐要是整数，百分⽐是时间的划分
⾥⾯百分数可以改变，反正必须0%到100%
@keyframes donghua{
0%{
transform:translate(0, 0);
}
25%{
transform:translate(900px, 0);
}
50%{
transform:translate(900px, 900px);
}
75%{
transform:translate(0, 900px);
}
100%{
transform:translate(0, 0);
}
}
2.2动画的常⽤属性
属性描述
@keyframe 规定动画
animation 所有动画属性的简写属性，出了animation-play-state属性
animation-name 规定@keyfram动画的名称（必须的）
animation-duration 规定动画完成⼀个周期所花费的秒或毫秒，默认是0（必须的）
animation-timing-function 规定动画的速度曲线，默认是"ea"
animation-delay 规定动画何时开始，默认是0卡通蚂蚁图片
animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite
animation-direction 规定动画是否在下⼀周期逆向播放，默认是normal，alternate逆播放 animation-play-state 规定动画是否在运⾏或暂停。默认是"running"，还有pau
animation-fill-mode 规定动画结束后状态，保持forwards回到起始backwards
例⼦：
动画序列
.box2{
width: 200px;
height: 200px;
background-color: yellow;
爆炒龙虾尾的做法/* 动画名称 */
animation-name: box2;
郑道昭
/* 动画时间 */
animation-duration: 3s;
/* 运动曲线 */
animation-timing-function: ea;
/* 何时开始 */
animation-delay: 1s;
/* 重复次数默认1次 infinite⽆限 */
animation-iteration-count: infinite;
/
* 下⼀周期是否逆向 alternate反⽅向*/
animation-direction: alternate;
/*结束后状态 */
animation-fill-mode: forwards;
}
.box2:hover{
/* ⿏标经过，盒⼦停⽌ */
animation-play-state: paud;
}
2.2动画简写属性
animation：动画名称持续时间运动曲线何时开始播放次数是否反⽅向动画起始或者结束的状态animation: name duration timing-function delay iteration-count direction fill-mode;
2.3动画曲线细节奇怪的英语
连续函数介值定理animation-timing-function，规定动画的速度曲线，默认是ea
值描述
linear 动画从头到尾匀速
ea 默认，动画以低速开始，然后加快，在结束前变慢
ea-in 动画以低速开始
ea-out 动画以低速结束
ea-in-out 动画以低速开始和结束
steps（）指定了时间函数中的间隔数量（步长）
steps(10)就是在这规定时间内，变化分⼗步完成，可实现打字机效果，
打字机效果：
div{
font: size 20px;
width: 0;
height: 20px;
overflow: hidden;
background-color: red;
animation-timing-function:steps(10);
animation: donghua 3s steps(11) infinite alternate;
}
@keyframes donghua{
0%{
width: 0;
}
100%{
width: 220px;
}
}
注意：⼀个元素添加多组动画，就直接添加逗号隔开即可：
animation: donghua 1s steps(8) infinite forwards, move 3s forwards;
⼩熊奔跑源码
效果：
图⽚：
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="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>
body{
background-color: skyblue;
}
.box{
position: absolute;
职业杀手width: 200px;
height: 100px;
background:url("../images/bear.png") no-repeat;
overflow: hidden;
animation: donghua 1s steps(8) infinite forwards, move 3s forwards;
}
@keyframes donghua{
0%{
background-position: 0 0;
}
100%{
background-position: -1600px 0;
}
}
@keyframes move{
0%{
left: 0;
}
100%{
left: 50%;
transform:translateX(-50%);
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
