西游四人组动画--会动的png图片

1 .核心原理:是一张连续帧的图片不断变化位置，连续的位置变化肉眼展示的就是一个动画了。这个对图片的位置要求非常严格。ps切图的时候就要仔细确定位置。
2 .新知识:animation中的steps参数

steps-animation-time-function 的参数

1 .让动画不连续，每一次动画执行到一个帧
2 .steps（）功能符和cubic-bezier功能符的地位和作用是一样，但是表现效果是不一样的，steps类似于楼梯坡道，每一次执行到一个地方，cublic-bezier更像是无障碍坡道
steps(num,position)
number:数值，表示把动画分成了多少段，每一次跳到这一个地方
position:start/end

start:动画执行的5个分段点是最后5个点，也就是会漏掉最一开始那个，一步到位
end:从最一开始执行，最后一个漏掉了，延迟到位

3 .对于只有0%，100%或from，to两个关键帧的动画，没有适用的理由
4 .如果是非等分，无法过渡的阶梯动画，则有适用价值

fixed元素居中显示

1 .方案1

.f;
    margin:auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 200px;
    height: 180px;

2 .方案2

left: 50%;
top:50%;
transform: translate(-50%,-50%);

3 .方案3

.f;
 left: 50%;
 top:50%;
 margin-left: -100px;
 margin-top: -90px;

 width: 200px;
 height: 180px;

4