animation动画
下面给大家介绍CSS动画方面的知识，动画一般用在移动端多一些，有了动画会让用户有更好的用户体验。下面具体介绍一下：
animation animation-name:动画名称
animation-duration:动画时间
animation-delay:动画延迟
animation-direction:alternate;先正运动后反向运动 ，reverse从反向开始运行动画alternate-reverse先反向运动后正向运动（要求：animation-iteration-count：n,n大于一）
animation-fill-mode:forwards 最后一帧
animation-iteration-count:infinite无限循环播放动画.动画播放的次数 不可为负值. 可以用小数定义循环(0.5 将播放动画到关键帧的一半（from 0 ~ 50%).
animation-timing-function:设置动画运行速度曲线
animation-play-state:paused|running设置播放与暂停
把animation-timing-function:的属性值换成steps(n,start)就表示帧动画，n代表的是分的步骤，例如：
div{
width:100px;
height:100px;
background:red;
animation-duration:2s;
animation-timing-function:steps(5,start);
@keyframe donghua{
0%{
background:red;
}
100%{
background:green;
}
就说明在两秒的时间内把转换的内容分成五段来展现，而且是直接到下一段，中间没有过渡的时间。
下面是一个例子：
css代码：.div1{
margin: 150px 400px;
width: 200px;
border: 1px solid red;
height: 200px;
background: red;
animation: mgc 10s infinite;
animation-direction:alternate-reverse;
/* animation-fill-mode:forwards; */
transform-origin: 150% 150%;
animation-timing-function:cubic-bezier(0, 2.48, 1,-1.46);
}
.div1:hover{
animation-play-state:paused;
}
@keyframes mgc{
0%{
background-color: red;
transform: rotate(0deg);
}
10%{
background-color: yellow;
transform: rotate(36deg);
}
20%{
background-color: blue;
transform: rotate(72deg);
}
30%{
background-color: green;
transform: rotate(108deg);
}
40%{
background-color: cyan;
transform: rotate(144deg);
}
50%{
background-color: yellowgreen;
transform: rotate(180deg);
}
60%{
background-color: purple;
transform: rotate(216deg);
}
70%{
background-color: pink;
transform: rotate(252deg);
}
80%{
background-color: gray;
transform: rotate(288deg);
}
90%{
background-color: yellowgreen;
transform: rotate(324deg);
}
100%{
background-color: green;
transform: rotate(360deg);
}
}
.div2{
width:140px;
height: 140px;
overflow: hidden;
background: url(754767-20160601000042992-1734972084.png);
background-position: 0 0;
animation: name 1s steps(11,start) infinite;
margin: 30px auto;
/* border: 1px solid red; */
}
@keyframes name{
0%{
background-position: 0px 0;
}
100%{
background-position: -1540px 0;
}
}
下面是动画截的图
