真正意义上面了解CSS3动画属性，不需要鼠标参与，直接动画改变执行效果：animation动画，逐帧动画，关键帧动画。
animation基本语法
动画的复合属性、简写
属性：animation
属性值：名字 时间 方式 无限次数
语法案例
animation:name 3s linear 5s infinite alternate
name-------->动画的名字
3s------------>动画执行的时长，.8s，表示0.8秒，0可以省去，0.8秒是人眼反应的最佳时间
linear-------->动画执行的类型
5s------------>动画延迟执行
infinite动画执行的次数==可以使用一个数字代替,不跟数字的话,则代表的是1次; 3就代表了3次; 一直执行;infinite一直运动
alternate反复执行==缓慢开始,缓慢结束
1.动画的名称
属性：animation-name
属性值：设置为创建动画中的自定义名称
animation-name属性必须与规则@keyframes配合使用，因为动画名称是由@keyframes定义声明的，如果提供多个属性值用逗号隔开。
2.动画的运动时间
属性：animation-duration
用于指定执行一个周期动画应该花多长时间。
属性值：时间，以秒或毫秒指定，并且最初设置为“0”，这意味着动画即时发生；我们可以指定一个持续时间或多个以逗号分隔的持续时间。
3.动画的延迟时间
属性：animation-delay
属性值：s ms
如果为animation-delay提供负数“-2S”的值，动画将立即启动，只要它被应用，但它将显示为它已经启动2s之前，你已经应用它。
4.动画的运动方式
属性：animation-timing-function
属性值：linear常用
ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。
linear：线性效果，速度将从开始到结束稳定。
ease-in：渐显效果，动画将缓慢启动，然后获得更多加速并稳定到持续时间结束。
ease-out：渐隐效果，动画将快速启动，然后减速并稳定到持续时间结束。
ease-in-out：渐显渐隐效果，它是组合了ease-in和ease-out。动画或过渡将开始缓慢，在中间加速，然后减速直至结束。
step-start：马上跳转到动画结束状态，动画或过渡将突然变为结束状态并保持在该位置直到动画结束。
step-end：动画或过渡保持其开始状态，直到动画执行结束，直接跳转到其动画结束状态。
steps([number,[start | end]])：
steps()可以将转换的持续时间划分为相等大小的间隔；或指定输出百分比的变化是发生在间隔的开始还是结束。
第一个参数number为指定的间隔数，即把动画分为n步阶段性显示，第二个参数默认为end，设置最后一步状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，以animation-fill-mode的设置为动画结束状态。
5.动画的运动次数
属性：animation-iteration-count
属性值：数字1....n，infinite
6.运动方向
属性：animation-direction
属性值：normal顺时针
reverse反向
alternate正反交替
alternate-reverse反正交替
7、animation-fill-mode属性设置动画时间之外的状态
常用取值：
none:默认值，不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态，保持 最终状态
backwards:设置对象状态为动画开始时的状态，原位置
both:设置对象状态为动画开始或结束时的状态
动画的创建
1.动画需要创建，就像工具需要购买，需要在css样式中创建
@keyframes 自定义的动画名字{
动画的运动方式}
动画的运动方式有2种，在案例里详细讲解。
-第一种表示单次运动，from....to....
-第二种运动方式表示多次运动：百分比
2.工具需要人去使用，动画也是需要调动
-给元素设置动画属性，哪个元素需要运动就给哪个元素添加
利用CSS3制作的动画片《快乐的小A》
用下面的图片素材，做一个逐帧动画
图片素材
大小为1260*300
动画素材-小A
动画效果
HTML结构
<div class="box">
<img src="img/charector.png" alt="">
</div>
CSS代码
首先是利用通配符，将有默认内外边距的都取消掉，
* {
margin: 0;
padding: 0
}
对id名为box的盒子，设置宽高，这里高度取图片的高度300px，宽取图片宽的1260*1/7=180px，可以设置边框作为验证，再调整好位置，上下边距100px，左右居中的位置。设置溢出隐藏。
.box {
width: 180px;
height: 300px;
/* border: 5px solid gray; */
margin: 100px auto;
overflow: hidden;
}
实现方法1：接下来就是动画的使用：完成2个问题即可
第一个：动画的创建
@keyframes change1 {
0% {}
100% {
transform: translateX(-1260px);
}
}
第二个：动画的调用
.box>img {
animation: change1 0.5s steps(7) infinite;
}
注意：steps的参数，根据素材来判断，这里用7，下面分别演示steps取值为2，5，7时的效果，体会为啥是7
steps取值为2
steps取值为5
steps取值为7，达到效果正常
结论：所以根据素材数据，steps正确取值才有好的动画效果，这里就是看到小A在欢快的跳跃
实现方法2：接下来就是动画的使用：完成2个问题即可
第一个：动画的创建
@keyframes change2 {
0% {
transform: translate(0px);
}
14.28% {
transform: translateX(-180px);
}
28.56% {
transform: translateX(-360px);
}
42.84% {
transform: translateX(-540px);
}
57.12% {
transform: translateX(-720px);
}
71.4% {
transform: translateX(-900px);
}
85.68% {
transform: translateX(-1080px);
}
100% {
transform: translateX(-1260px);
}
}
第二个：动画的调用
.box>img {
animation: change2 0.8s step-end infinite;
}
这里使用动画运动方式是step-end：动画或过渡保持其开始状态，直到动画执行结束，直接跳转到其动画结束状态。
效果如下
