代码:css3动画效果demo

时间:2023-01-16 05:38:40

四行文字会逐次掉落:  如果要停留在最后一帧的动画,注意要用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:;
}
100% {
-webkit-transform: none;
transform: none;
opacity:;
}
} @-webkit-keyframes fadeInUp {
0% { -webkit-transform: translate3d(0, 150%, 0); transform: translate3d(0, 150%, 0); opacity:; }
100% { -webkit-transform: none; transform: none; opacity:; }
}
@-webkit-keyframes fadeInRight {
0% { -webkit-transform: translate3d(150%, 0, 0); transform: translate3d(150%, 0, 0); opacity:; }
100% { -webkit-transform: none; transform: none; opacity:; }
}
@-webkit-keyframes moveUp {
0% { top: 100%;height:;}
100% { top:; height: 100%;}
} @-webkit-keyframes fadeInDown1 {
0% { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); opacity:; }
100% { -webkit-transform: none; transform: none; opacity:; }
} @-webkit-keyframes scale {
0% {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity:;
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity:;
}
} @-webkit-keyframes next {
0% { -webkit-transform: translateY(-4px); }
50% { -webkit-transform: translateY(1px); }
100% { -webkit-transform: translateY(-4px); }
} @-webkit-keyframes line {
0% { height:; }
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:;}
100% {-webkit-transform: none;transform: none;opacity:;}
}
/*向上淡入*/
@-webkit-keyframes fadeInUp {
0% {-webkit-transform: translate3d(0, 20px, 0);transform: translate3d(0, 20px, 0);opacity:;}
100% {-webkit-transform: none;transform: none;opacity:;}
}
/*向左淡入*/
@-webkit-keyframes fadeInLeft {
0% {-webkit-transform: translate3d(200px,0 , 0);transform: translate3d(200px, 0, 0);opacity:;}
100% {-webkit-transform: none;transform: none;opacity:;}
}
/*向右淡入*/
@-webkit-keyframes fadeInRight {
0% {-webkit-transform: translate3d(-100px,0 , 0);transform: translate3d(-100px, 0, 0);opacity:;}
100% {-webkit-transform: none;transform: none;opacity:;}
}
/*疯狂摆动*/
@-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:;-webkit-transform:translateX(2000px);opacity:;}
60%{opacity:;-webkit-transform:translateX(-30px);opacity:;}
80%{-webkit-transform:translateX(10px);opacity:;}
100%{-webkit-transform:translateX(0);opacity:;}
}
/*缩放*/
@-webkit-keyframes scale {
0% {-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);opacity:;}
100% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity:;}
}
/*缩放(从2倍变小)*/
@-webkit-keyframes scale2 {
0% {-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);opacity:;}
50% {-webkit-transform: scale(2);-ms-transform: scale(2);transform: scale(2);opacity:;}
80% {-webkit-transform: scale(0.6);-ms-transform: scale(0.6);transform: scale(0.6);opacity:;}
100% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity:;}
}

....


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>

...