css3简易实现图标动画由小到大逐个显现

在制作网站时避免图片太平淡经常会用到动画效果：由小到大跳跃出现。这种效果很有视觉冲击力，显著提高关注度~

原理：利用css3的动画属性@keyframes@-moz-keyframes@-webkit-keyframes定义动画suofang,再用animation调用suofang这一动画帧，并将动画添加到图片上，需要注意的是需要给图片相当于初始化的一个处理

transform:scale(0);
    -moz-transform:scale(0);
    -webkit-transform:scale(0);

 

最后在js中调用css动画。对于不同的页面，需要使用index来标注不同的页面。

 

 1 <!--第二屏开始-->
 2     <div class="section">
 3         <div class="mdmobile-second-one">
 4             <div class="mdmobile-second-one-top">
 5                 <img src="images/06_03.png"   class="mdmobile-second-one-top-top"/>
 6                 <img src="images/06_07.png"   class="mdmobile-second-one-top-foot"/>
 7             </div>
 8 
 9             <div class="mdmobile-second-one-middle">
10                 <div class="mdmobile-second-one-middle-top">
11                     <img src="images/07_03.png