每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：
所以百度了一下前端使用css实现这个效果，然后就自己就照葫芦画瓢的写了一个小小的demo，完全当作学习了一把。
在界面上，我是参考了图片上的界面，写的css，然后在美团上面扒的数据。完成后的界面如下图：
开始想着只是做一个简单的实现效果，界面上只有div框，按钮什么的这些，反正想着很丑的界面，但是自己看到饿了么这么好看的界面，自己就忍不住模仿着写了一下下。
主要用到的是移动端适配方案：flexible.js + rem的方案
首先获取到页面上所有按钮，然后给按钮添加点击事件，获取到点击当前按钮的位置坐标信息
方案一：使用定位+transition的方式实现
方案二：使用transform + transition的方式实现
其实还可以使用css的animate来实现，只不过由于需要动态计算目标位置的坐标，实现起来比较困难，所以我就没有写，如果目标位置的坐标值固定，那么可以通过animate改变top、left或者translateX、translateY的值来实现这个效果，垂直方向的动画使用贝塞尔曲线的 function-timing 。
初识CSS抛物线动画
https://github.com/HyFun/CSS-Sample-ElemeAnimate
创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。transition也可实现动画。transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（如hover）时才能获取样式，这样就会产生过渡动画。
感觉自己总是混淆css各种动画效果，所以再这里总结一下
1. transition ，所在元素块样式变动时启动，可用于样式变动时 产生过渡动画效果
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
2. tranform :用于平移，旋转，缩放，透视
语法
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。值：0-100%,from（与 0% 相同）,to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。
4.@media :可以根据屏幕大小响应式改变样式
接下来利用transition和transfrom实现一个简单的翻牌效果,先看效果
