动画

动画：
animation：

1.设定动画轨迹
@keyframes move{
from{
//设定元素的开始样式
}
to{
//设定元素的结束样式
}
}
@keyframes move{
0%{开始}
100%{结束}
50%{中间}

}

2.应用动画
div{
animation-name:’’;
animation-duration: 3s; /控制动画持续时间/
animation-delay: 3s; /动画延迟时间/
animation-iteration-count: 2; /动画执行次数/
animation-iteration-count: infinite; /* 动画循环执行 */
animation-direction: reverse; /*倒着移动 起点反转 */
animation-direction: alternate; /*交替执行–起点是头部—从头到尾-从尾到头----循环 */
animation-direction: alternate-reverse; /*交替执行起点是尾部—从尾到头-从头到尾—循环 */
animation-fill-mode: forwards; /*动画开始之前要停留在0%的位置(要和animation-delay: 3s;一起使用) 定义动画开始前后的停留位置 *//*动画结束之后停留在100%的位置
animation-fill-mode: backwards; /动画结束之后停留在100%的位置/
animation-timing-function: steps(5); /*分5步执行 一步300px,五步刚好五张图片,不分步骤只需要向左拉1200px就可以显示 */

}
animation-timing-function:
    ease        先慢后快
    ease-in         先慢后稍快
    ease-in-out     先慢后快后慢
    ease-out        先快后慢
    linear          匀速
    steps(5)     动画分为5个阶段   

实例：

hi!