四行文字会逐次掉落: 如果要停留在最后一帧的动画，注意要用forwards，不要用both。
<style type="text/css"> @-webkit-keyframes fadeInDown1 { 0% { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); opacity: 0; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .div111{background:#0099ff;width:300px;height:100px;} .div111 p{opacity:0;} .anima p:nth-of-type(1){-webkit-animation: fadeInDown1 .5s ease-in-out .5s forwards;} .anima p:nth-of-type(2){-webkit-animation: fadeInDown1 1s ease-in-out .5s forwards;} .anima p:nth-of-type(3){-webkit-animation: fadeInDown1 1.5s ease-in-out .5s forwards;} .anima p:nth-of-type(4){-webkit-animation: fadeInDown1 2s ease-in-out .5s forwards;} </style> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> setTimeout(function(){ $(".div111").addClass('anima'); },1000); </script> <div class="div111"> <p>ssssssssssss</p> <p>aaaaaaaaaaaa</p> <p>啊啊啊啊</p> <p>111111</p> </div>
附几个动画：
@-webkit-keyframes fadeInDown { 0% { -webkit-transform: translate3d(0, -150%, 0); transform: translate3d(0, -150%, 0); opacity: 0; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes fadeInUp { 0% { -webkit-transform: translate3d(0, 150%, 0); transform: translate3d(0, 150%, 0); opacity: 0; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes fadeInRight { 0% { -webkit-transform: translate3d(150%, 0, 0); transform: translate3d(150%, 0, 0); opacity: 0; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes moveUp { 0% { top: 100%;height: 0;} 100% { top: 0; height: 100%;} } @-webkit-keyframes fadeInDown1 { 0% { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); opacity: 0; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes scale { 0% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes next { 0% { -webkit-transform: translateY(-4px); } 50% { -webkit-transform: translateY(1px); } 100% { -webkit-transform: translateY(-4px); } } @-webkit-keyframes line { 0% { height: 0; } 100% { height: 270px; } } @-webkit-keyframes spin { 0% { -webkit-transform: rotateZ(0); transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-webkit-keyframes spin-1 { 0% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } 100% { -webkit-transform: rotateZ(0); transform: rotateZ(0); } }
/*向下淡入*/ @-webkit-keyframes fadeInDown { 0% {-webkit-transform: translate3d(0, -20px, 0);transform: translate3d(0, -20px, 0);opacity:0;} 100% {-webkit-transform: none;transform: none;opacity:1;} } /*向上淡入*/ @-webkit-keyframes fadeInUp { 0% {-webkit-transform: translate3d(0, 20px, 0);transform: translate3d(0, 20px, 0);opacity:0;} 100% {-webkit-transform: none;transform: none;opacity:1;} } /*向左淡入*/ @-webkit-keyframes fadeInLeft { 0% {-webkit-transform: translate3d(200px,0 , 0);transform: translate3d(200px, 0, 0);opacity:0;} 100% {-webkit-transform: none;transform: none;opacity:1;} } /*向右淡入*/ @-webkit-keyframes fadeInRight { 0% {-webkit-transform: translate3d(-100px,0 , 0);transform: translate3d(-100px, 0, 0);opacity:0;} 100% {-webkit-transform: none;transform: none;opacity:1;} }
/*疯狂摆动*/ @-webkit-keyframes wobble{ 0%{-webkit-transform:translateX(0%)} 15%{-webkit-transform:translateX(-25%) rotate(-5deg)} 30%{-webkit-transform:translateX(20%) rotate(3deg)} 45%{-webkit-transform:translateX(-15%) rotate(-3deg)} 60%{-webkit-transform:translateX(10%) rotate(2deg)} 75%{-webkit-transform:translateX(-5%) rotate(-1deg)} 100%{-webkit-transform:translateX(0%)} }
/*右侧弹跳进入*/ @-webkit-keyframes bounceInRight{ 0%{opacity:0;-webkit-transform:translateX(2000px);opacity:0;} 60%{opacity:1;-webkit-transform:translateX(-30px);opacity:1;} 80%{-webkit-transform:translateX(10px);opacity:1;} 100%{-webkit-transform:translateX(0);opacity:1;} }
/*缩放*/ @-webkit-keyframes scale { 0% {-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);opacity:0;} 100% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity:1;} } /*缩放(从2倍变小)*/ @-webkit-keyframes scale2 { 0% {-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);opacity:0;} 50% {-webkit-transform: scale(2);-ms-transform: scale(2);transform: scale(2);opacity:0;} 80% {-webkit-transform: scale(0.6);-ms-transform: scale(0.6);transform: scale(0.6);opacity:1;} 100% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity:1;} }
....
jquery动画：（用delay）2015-11-18
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#div").animate({height:"300px"}) .animate({width:"600px"}) .animate({height:"100px"}) .animate({width:"300px"}); $("#div").delay(1000).animate({width:"10px"}); }); </script> <div id="div" style="background:purple;height:100px;width:100px;margin:6px;"></div>
CSS3柱状动画。 2016-4-1
效果：进入屏幕显示区后，动画播放；移出显示区后，复原。再进入，再播放。
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var offerIndex={ //首页css3动画 animaCSS3:function(){ var timer; $(window).scroll(function(e){ if ($('#savemoney').length > 0){ var move = $(window).height() *0.7; var h0 = $('#savemoney').height(); clearTimeout(timer); var offset1 = $(window).scrollTop() - $('#savemoney').offset().top + move; var offset2 = $(window).scrollTop() - $('#savemoney').offset().top + move - $('#savemoney').height(); //console.log(offset1+'--------- '+offset2); if(offset1 > 0 && offset2 < h0){ timer = setTimeout(function(){ $('#savemoney').find('.zhu-base').addClass('anima'); },200);//延时执行1次 return true; }else{ timer = setTimeout(function(){ $('#savemoney').find('.zhu-base').removeClass('anima'); },200);//延时执行1次 return false; } } }); } } offerIndex.animaCSS3(); }); </script> <style type="text/css"> .savemoney{position:relative;margin-top:70px;height:670px;font-family:'微软雅黑';}/*动画区域*/ .savemoney .zhu-base{position:absolute;bottom:0;width:64px;height:10px;background:#ff7200;} .savemoney .zhu1{left:73px;} .savemoney .zhu2{left:227px;} .savemoney .zhu3{left:381px;} .savemoney .zhu4{left:535px;} .savemoney .zhu-memo{display:none;position:absolute;width:128px;left:-32px;top:-36px;text-align:center;} @-webkit-keyframes height{0%{height:0;opacity:0;} 100%{-webkit-transition:none;transition:none;opacity:1;}}/*高度*/ @keyframes flash {0%,50%,100%{opacity:1}25%,75%{opacity:0}}/*闪烁*/ .savemoney .zhu1.anima{height:80px; -webkit-animation:height .3s 0.0s ease backwards} .savemoney .zhu2.anima{height:128px;-webkit-animation:height .3s 0.4s ease backwards} .savemoney .zhu3.anima{height:160px;-webkit-animation:height .4s 0.9s ease backwards} .savemoney .zhu4.anima{height:320px;-webkit-animation:height .4s 1.3s ease backwards} .savemoney .zhu-base.anima .zhu-memo{display:block;-webkit-animation:flash .4s 1.8s ease backwards} </style> <div style="height:2000px;"></div> <div class="savemoney" id="savemoney"> <div class="zhu-base zhu1"><div class="zhu-memo f16">低于市场 <span class="cOrange f20">50%</span></div></div> <div class="zhu-base zhu2"><div class="zhu-memo f16">低于市场 <span class="cOrange f20">20%</span></div></div> <div class="zhu-base zhu3"><div class="zhu-memo f16"><span class="cOrange f20">100%</span></div></div> <div class="zhu-base zhu4"><div class="zhu-memo f16">高于市场 <span class="cOrange f20">100%</span></div></div> </div> <div style="height:2000px;"></div>
...
