代码：一个简单css3动画效果demo

<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);
    }
}