一、动画概念
动画是CSS3的一个重要用法，动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。
二、动画基本用法
1.动画模板
/* 动画代码,在style样式定义一个动画，名字为example */
<style>
@keyframes example {
/* "from" 和 "to"（代表 0％（开始）和 100％（完成）） */
from {
background-color: red;}//开始颜色为红色
to {
background-color: pink;}//完成时的颜色为粉色
}
/* 向此元素应用动画效果 */
div {
width: 100px;//盒子宽度
height: 100px;//盒子高度
background-color: red;//背景颜色
animation-name: example;//调用动画，exampl为定义的动画名字
animation-duration: 4s;//动画持续时间
}
</style>
2.动画的使用
1 animation-name:调用已定义的动画名字
2animation-duration:定义动画的持续时间，默认时间为0s
3animation-delay:定义动画延迟时间
4 animation-direction:定义动画的运动方向，指定是向前播放、向后播放还是交替播放动画，有以下四个参数：
normal- 动画正常播放（向前）。默认值reverse- 动画以反方向播放（向后）alternate- 动画先向前播放，然后向后alternate-reverse- 动画先向后播放，然后向前
5animation-timing-function:定义动画的速度曲线
ease- 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）linear- 规定从开始到结束的速度相同的动画ease-in- 规定慢速开始的动画ease-out- 规定慢速结束的动画ease-in-out- 指定开始和结束较慢的动画cubic-bezier(n,n,n,n)- 运行您在三次贝塞尔函数中定义自己的值
6 animation-iteration-count:定义动画的播放次数，一共有两个参数
n- n为任意正整数infinite- 动画无限循环
7 animation-fill-mode:规定目标元素的样式
none- 默认值。动画在执行之前或之后不会对元素应用任何样式。forwards- 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。backwards- 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。both- 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
8 animation-duration:定义动画的持续时间
3.小熊案例
素材：
- 首先先定义一个动画
1. 小熊动作的定义 bear：动画的名字 */
@keyframes bear{
0%{
background-position: 0 0;/* 定义初始化精灵图的位置 */
}
100%{
background-position: -1600px 0;/* 只移动x轴，y轴不进行移动 */
}
}
- 在body中新建一个div
2. 在body中新建一个div
<body>
<div></div>
</body>
- 设置style样式，调用动画
<style>
body{
background-color: pink;/* 设置body背景颜色 */
}
/* 设置div样式 */
div{
position: absolute;/* 设置定位为绝对定位 */
width: 200px;
height: 100px;
background: url(../../../images/image/bear.png) no-repeat;/* 导入小熊精灵图 */
/*调用动画方法 动画名字 时间 步长 无限循环动画*/
animation:bear 1.5s steps(8) infinite;
/* steps(8)：设置8个步长，显得效果更佳、
infinite：无限循环
forwards：移动到指定位置后固定不动 */
}
</style>
效果图：
到这里，效果基本已经实现，但是小熊动画只能在原地动，不会像效果一样，会移动到屏幕的中心位置，那么这个时候需要重新给小熊定义一个移动的新动画。
- 重新新建一个动画
<style>
/* move移动到中央 */
@keyframes movebear{
0%{
left: 0px;/* 定义起始位置 */
}
100%{
margin: 100px auto;
left:50%;/* 定义移动后的位置 */
transform: translateX(-50%);
/* 向左走百分之50,等于自己宽度的一半，可以动态的根据width来调整 */
}
</style>
- 调用新建的动画,调用新的动画时用逗号分隔
<style>
/* 设置div样式 */
div{
position: absolute;/* 设置定位为绝对定位 */
width: 200px;
height: 100px;
background: url(../../../images/image/bear.png) no-repeat;/* 导入小熊精灵图 */
animation:bear 1.5s steps(8) infinite,movebear 3.2s forwards;
/* steps(8)：设置8个步长，显得效果更佳、
infinite：无限循环
forwards：移动到指定位置后固定不动,保留最后一个元素定义的样式 */
/* 调用已定义的动画方法，调用两个动画需要用逗号分隔 */
}
</style>
- 效果展示
总结
动画还是挺好玩的，有兴趣的了解一下！
