代码：css3动画效果demo

2023-04-27 12:54•css•阅读 1230

四行文字会逐次掉落: 如果要停留在最后一帧的动画，注意要用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  ></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 ></div>
<div class="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 ></div>

...

上一篇 »CSS3 Loading，加载动画效果
下一篇 »css3 简单动画

代码：css3动画效果demo

相关推荐

CSS3关键帧动画——时钟

animate.css文件使用说明、addClass不起作用解决方法

prefix css3漏斗Loading加载动画

css3 鼠标悬浮动画效果

vue中使用第三方插件animate.css实现动画效果

HTML5学习之CSS3动画

CSS3 Animation 动画

css3 动画 执行一次

css3 动画执行一次