css3动画效果

这是仿写的百度外卖的h5部分页面动画，效果如图所示：

核心文件引入：

swiper.min.css
swiper.min.js
zepto/zepto.js
zepto/event.js
zepto/fx.js
zepto/fx_methods.js// 响应动画需要的文件
zepto/touch.js//响应长按事件需要的文件

里面的知识点：

1、loading页面、欢迎页面、swiper布局页面层叠排列，用到了绝对定位和z-index
2、loading页面动画执行完毕后页面淡出（事件监听）
3、欢迎页面长按按钮进入swiper布局页面（zepto中的longTap事件）
4、使用rem作为单位，通过js动态修改html元素的font-size来实现动态适配多种设备
5、使用sass来管理样式，通过在index.scss文件中引入其他.scss文件，例如：@import 'base.scss';编译执行后就只需在index.html中引入一个index.css文件即可。
编译.scss文件使用[Koala](http://koala-app.com)
6、sass语法优化：

（1）把一些运算的功能抽取出来，作为函数,例如：

//px to rem
@function p2r($size){
    @return($size/32)*1rem;
}

使用的时候，直接width:p2r(20);即可

（2）混入：把一些公共样式进行抽取，例如：

//背景居中
@mixin bgc($url,$width){
    background: url($url) no-repeat center / 100% 100%;
    position: absolute;
    left: 50%;
    margin-left:-($width/32/2)*1rem;   
}

使用的时候：

.box{
    @include bgc('../imgs/page1/circle1.png',200);
}

7、动画效果单独写好，通过给元素动态添加animate类名而拥有动画效果，使静态页面布局与动画布局分离开来，方便查看。
8、精灵图中使用background-position来控制要显示那一块图片，并使用绝对定位控制图片间的相对位置关系。

技术实现：

1、js动态修改html元素的font-size

document.querySelector('html').style.fontSize = window.screen.width/20 +"px";

2、入场动画：给元素添加animate类名（动画效果自己写好）
3、进度条完成，页面淡出：

//原生js实现：
document.querySelector('.loading .step').addEventListener('animationend',function(){    
    $('.loading').fadeOut();
})

//jQuery实现
$('.loading .step').on('animationend',function(){
    $('.loading').fadeOut();
})

4、长按，欢迎页淡出，进入swiper容器页面

$('.welcome .btn').longTap(function(){
    $('.welcome').fadeOut(1000,function(){
        $('.swiper-container .page1').addClass('animate');
    }); 
})

5、用到的动画效果：

 1. 进度条：宽度from{width:0％}to{width:100%}
 2. 旋转进入：关键要设置好旋转中心点
     transform-origin:50% 100%;（底部正中间）
     transform-origin:100% 100%;（右下角）
 3、眨眼：y方向缩放scale(1,0)
 4、来回走路：平移，走到另一端时y方向旋转180度，动画重复执行（infinite）