帖子： link
创建五个正方形，后4个座位跳动的正方形，称之为 d 第一个slide平滑移动，称之为 f
为d 1-4 设置跳动动画（单纯的跳动，利用百分比时间，来过渡每一个d的延迟跳动） rotate 然后利用transform-orgin设置旋转的基点 -50% center 就是元素左边50% 垂直居中的点
然后animation-name: 添加动画名称 其余的d-2 3 4 就百分比设置跳动的时机
好了，1问题来了，那么另外一个动画，就是scale这个写在哪里？
这里利用了一个::before伪元素的技巧，把动画给拆分开来管理。
在d 1-4 设置::before{display:absolute;height:inherit;width:inherit;background-color:skyblue}
设置动画 animation scale 但是还需要设置 transform-origin: 为什么呢？你试试不设置就知道了，改变他的位置，让他固定在底部，哇这也是一个技巧~ 超厉害~！！！

最后 每个动画都添加上 alternate 可以重复来回播放了

思路完毕。
我觉得可以用scss优化的是把动画设置成mixin 或者function 然后不同的d 设置不同的百分比，无需写多3 *2个animation了
还是不太喜欢css3的变量，因为他是css风格的优先级，不太明确（嗯，不能嵌套造成的，主要是不能嵌套！像function那样包裹）
我喜欢用$value 代替