如何运用CSS3轻松实现H5页面里的飞行动画

     随着h5页面的宣传优势，越来越的企业做活动开始追求移动端的展示效果，接下来我们就开始教大家如何用css3实现这样的h5动画页面效果。

        首先建立文件之后，给背景来一个青蓝色的天空，直接给body设置一个背景颜色即可，再插入一张plane的飞机图片，这样，准备工作就完成了；

       接下来，飞机默认位置是顶着坐上角的，这样令人很不舒服，咱们可以给他一个postion的定位，放置到一个自己觉得舒服的地方，好了，可以开始制作动画的代码了，css3提供了两种动画形式的代码，其中之一是animation，fei——这个动画的名字，2s——这个动画的时长，接下来的代码，是书写animation动画的标准格式，0%是指动画一开始是什么状态，100%那当然是指动画结束时候的状态。

假设我们想要飞机上下飞，那么需要输入transform这个代码来指定飞机要变了，冒号后面的意思是指要移动Y轴移动变化，单位是30个像素，好了，做到这里，就可以预览到飞机可以飞了，等会，看起来是不是有点傻，从下往上飞，然后循环？，不对啊，我们希望看上去，应该是，上下上下这样循环啊！是不是很多人想到了，只要加入中间那个50%的代码，小修改一下参数就可以了。