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

原理：利用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 3 4 5  6  7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 　　　　　　　　　　22 23 24 25 26 27 28 29 30 31 

 1 /*第二屏开始*/ 2 3 @keyframes suofang { 4 0% {transform:scale(0.2);} 5 100% {transform:scale(1.0);} 6 } 7 @-moz-keyframes suofang { 8 0% {-moz-transform:scale(0.2);} 9 100% {-moz-transform:scale(1.0);}10 }11 @-webkit-keyframes suofang {12 0% {-webkit-transform:scale(0.2);}13 100% {-webkit-transform:scale(1.0);}14 }15 .mdmobile-second-one-middle-top-right.active,16 .mdmobile-second-one-middle-top-left.active,17 .mdmobile-second-one-middle-middle-one.active,18 .mdmobile-second-one-middle-middle-two.active,19 .mdmobile-second-one-middle-middle-three.active,20 .mdmobile-second-one-middle-foot-left.active,21 .mdmobile-second-one-middle-foot-right.active22 {23 animation: suofang 1s forwards;24 -moz-animation: suofang 1s forwards;25 -webkit-animation: suofang 1s forwards;26 }27 .mdmobile-second-one-middle-top-right,28 .mdmobile-second-one-middle-top-left,29 .mdmobile-second-one-middle-middle-one,30 .mdmobile-second-one-middle-middle-two,31 .mdmobile-second-one-middle-middle-three,32 .mdmobile-second-one-middle-foot-left,33 .mdmobile-second-one-middle-foot-right34 {35 transform:scale(0);36 -moz-transform:scale(0);37 -webkit-transform:scale(0);38 }

if(index == 2){ $(".mdmobile-second-one-middle-top-left").addClass("active"); setTimeout(function(){ $(".mdmobile-second-one-middle-top-right").addClass("active"); },100); setTimeout(function(){ $(".mdmobile-second-one-middle-middle-one").addClass("active"); },200); setTimeout(function(){ $(".mdmobile-second-one-middle-middle-two").addClass("active"); },300); setTimeout(function(){ $(".mdmobile-second-one-middle-middle-three").addClass("active"); },400); setTimeout(function(){ $(".mdmobile-second-one-middle-foot-left").addClass("active"); },500); setTimeout(function(){ $(".mdmobile-second-one-middle-foot-right").addClass("active"); },600); }