css3 simply implements icon animation to display one by one from small to large_html/css_WEB-ITnose

When making a website, animation effects are often used to prevent the pictures from being too bland: jumping from small to large. This effect is very visually impactful and significantly increases attention~

Principle: Use the animation attribute @keyframes@-moz-keyframes@-webkit-keyframes of css3 to define the animation suofang, and then use animation to call suofang. An animation frame and add the animation to the picture. It should be noted that the picture needs to be given a processing equivalent to initialization

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

Finally in js Call css animation. For different pages, you need to use index to mark different pages.

 1 <!--第二屏开始--> 2     <div class="section"> 3         <div class="mdmobile-second-one"> 4             <div class="mdmobile-second-one-top"> 5                 <img  class="mdmobile-second-one-top-top lazy"  src="/static/imghwm/default1.png"  data-src="images/06_03.png" / alt="css3 simply implements icon animation to display one by one from small to large_html/css_WEB-ITnose" > 6                 <img  class="mdmobile-second-one-top-foot lazy"  src="/static/imghwm/default1.png"  data-src="images/06_07.png" / alt="css3 simply implements icon animation to display one by one from small to large_html/css_WEB-ITnose" > 7             </div> 8  9             <div class="mdmobile-second-one-middle">10                 <div class="mdmobile-second-one-middle-top">11                     <img  class="mdmobile-second-one-middle-top-left lazy"  src="/static/imghwm/default1.png"  data-src="images/07_03.png" / alt="css3 simply implements icon animation to display one by one from small to large_html/css_WEB-ITnose" >12                     <img  class="mdmobile-second-one-middle-top-right lazy"  src="/static/imghwm/default1.png"  data-src="images/07_05.png" / alt="css3 simply implements icon animation to display one by one from small to large_html/css_WEB-ITnose" >13                     <div class="clear"></div>14                 </div>15                 <div class="mdmobile-second-one-middle-middle">16                     <img  class="mdmobile-second-one-middle-middle-one lazy"  src="/static/imghwm/default1.png"  data-src="images/07_09.png" / alt="css3 simply implements icon animation to display one by one from small to large_html/css_WEB-ITnose" >17                     <img  class="mdmobile-second-one-middle-middle-two lazy"  src="/static/imghwm/default1.png"  data-src="images/07_11.png" / alt="css3 simply implements icon animation to display one by one from small to large_html/css_WEB-ITnose" >18                     <img  class="mdmobile-second-one-middle-middle-three lazy"  src="/static/imghwm/default1.png"  data-src="images/07_13.png" / alt="css3 simply implements icon animation to display one by one from small to large_html/css_WEB-ITnose" >19                     <div class="clear"></div>20                 </div>21 　　　　　　　　　　<div class="mdmobile-second-one-middle-foot">22                     <img  class="mdmobile-second-one-middle-foot-left lazy"  src="/static/imghwm/default1.png"  data-src="images/07_16.png" / alt="css3 simply implements icon animation to display one by one from small to large_html/css_WEB-ITnose" >23                     <img  class="mdmobile-second-one-middle-foot-right lazy"  src="/static/imghwm/default1.png"  data-src="images/07_18.png" / alt="css3 simply implements icon animation to display one by one from small to large_html/css_WEB-ITnose" >24                     <div class="clear"></div>25                 </div>26             </div>27             <div class="mdmobile-second-one-foot">28             </div>29         </div>30     </div>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);            }