console 命令行工具 X clear

console

<div class="wrapper">
        <h1 class="tit">css3动画实例</h1>
        <p>bootcdn：http://cdn.bootcss.com/animate.css/3.5.2/animate.css</p>
        <div class="item">
            <p>steps(1)</p>
            <div class="d2"></div>
        </div>
        
        <div class="item">
            <p>bounce</p>
            <div class="dd bounce"></div>
        </div>

        <div class="item">
            <p>flash </p>
            <div class="dd flash"></div>
        </div>

        <div class="item">
            <p>pulse </p>
            <div class="dd pulse"></div>
        </div>

        <div class="item">
            <p>rubberBand </p>
            <div class="dd rubberBand"></div>
        </div>

        <div class="item">
            <p>shake </p>
            <div class="dd shake"></div>
        </div>

        <div class="item">
            <p>headShake </p>
            <div class="dd headShake"></div>
        </div>

        <div class="item">
            <p>swing </p>
            <div class="dd swing"></div>
        </div>

        <div class="item">
            <p>tada </p>
            <div class="dd tada"></div>
        </div>

        <div class="item">
            <p>wobble </p>
            <div class="dd wobble"></div>
        </div>

        <div class="item">
            <p>jello </p>
            <div class="dd jello"></div>
        </div>

        <div class="item">
            <p>bounceIn </p>
            <div class="dd bounceIn"></div>
        </div>

        <div class="item">
            <p>bounceInDown </p>
            <div class="dd bounceInDown"></div>
        </div>

        <div class="item">
            <p>bounceInLeft </p>
            <div class="dd bounceInLeft"></div>
        </div>

        <div class="item">
            <p>bounceInRight </p>
            <div class="dd bounceInRight"></div>
        </div>

        <div class="item">
            <p>bounceInUp </p>
            <div class="dd bounceInUp"></div>
        </div>

        <div class="item">
            <p>bounceOut </p>
            <div class="dd bounceOut"></div>
        </div>

        <div class="item">
            <p>bounceOutDown </p>
            <div class="dd bounceOutDown"></div>
        </div>

        <div class="item">
            <p>bounceOutLeft </p>
            <div class="dd bounceOutLeft"></div>
        </div>

        <div class="item">
            <p>bounceOutRight </p>
            <div class="dd bounceOutRight"></div>
        </div>

        <div class="item">
            <p>fadeIn </p>
            <div class="dd fadeIn"></div>
        </div>

        <div class="item">
            <p>fadeInDown </p>
            <div class="dd fadeInDown"></div>
        </div>

        <div class="item">
            <p>fadeInDownBig </p>
            <div class="dd fadeInDownBig"></div>
        </div>

        <div class="item">
            <p>fadeInLeft </p>
            <div class="dd fadeInLeft"></div>
        </div>

        <div class="item">
            <p>fadeInLeftBig </p>
            <div class="dd fadeInLeftBig"></div>
        </div>

        <div class="item">
            <p>fadeInRight </p>
            <div class="dd fadeInRight"></div>
        </div>

        <div class="item">
            <p>fadeInRightBig </p>
            <div class="dd fadeInRightBig"></div>
        </div>

        <div class="item">
            <p>fadeInUp </p>
            <div class="dd fadeInUp"></div>
        </div>

        <div class="item">
            <p>fadeInUpBig </p>
            <div class="dd fadeInUpBig"></div>
        </div>

        <div class="item">
            <p>fadeOut</p>
            <div class="dd fadeOut"></div>
        </div>

        <div class="item">
            <p>fadeOutDown</p>
            <div class="dd fadeOutDown"></div>
        </div>

        <div class="item">
            <p>fadeOutDownBig</p>
            <div class="dd fadeOutDownBig"></div>
        </div>

        <div class="item">
            <p>fadeOutLeft </p>
            <div class="dd fadeOutLeft"></div>
        </div>

        <div class="item">
            <p>fadeOutLeftBig </p>
            <div class="dd fadeOutLeftBig"></div>
        </div>

        <div class="item">
            <p>fadeOutRight </p>
            <div class="dd fadeOutRight"></div>
        </div>

        <div class="item">
            <p>fadeOutRightBig </p>
            <div class="dd fadeOutRightBig"></div>
        </div>

        <div class="item">
            <p>fadeOutUp </p>
            <div class="dd fadeOutUp"></div>
        </div>

        <div class="item">
            <p>fadeOutUpBig </p>
            <div class="dd fadeOutUpBig"></div>
        </div>

        <div class="item">
            <p>flip </p>
            <div class="dd flip"></div>
        </div>

        <div class="item">
            <p>flipInX </p>
            <div class="dd flipInX"></div>
        </div>

        <div class="item">
            <p>flipInY </p>
            <div class="dd flipInY"></div>
        </div>

        <div class="item">
            <p>flipOutX </p>
            <div class="dd flipOutX"></div>
        </div>

        <div class="item">
            <p>flipOutY </p>
            <div class="dd flipOutY"></div>
        </div>

        <div class="item">
            <p>lightSpeedIn </p>
            <div class="dd lightSpeedIn"></div>
        </div>

        <div class="item">
            <p>lightSpeedOut </p>
            <div class="dd lightSpeedOut"></div>
        </div>

        <div class="item">
            <p>rotateIn </p>
            <div class="dd rotateIn"></div>
        </div>

        <div class="item">
            <p>rotateInDownLeft </p>
            <div class="dd rotateInDownLeft"></div>
        </div>

        <div class="item">
            <p>rotateInDownRight </p>
            <div class="dd rotateInDownRight"></div>
        </div>

        <div class="item">
            <p>rotateInUpLeft </p>
            <div class="dd rotateInUpLeft"></div>
        </div>

        <div class="item">
            <p>rotateInUpRight </p>
            <div class="dd rotateInUpRight"></div>
        </div>

        <div class="item">
            <p>rotateOut </p>
            <div class="dd rotateOut"></div>
        </div>

        <div class="item">
            <p>rotateOutDownLeft </p>
            <div class="dd rotateOutDownLeft"></div>
        </div>

        <div class="item">
            <p>rotateOutDownRight </p>
            <div class="dd rotateOutDownRight"></div>
        </div>

        <div class="item">
            <p>rotateOutUpLeft </p>
            <div class="dd rotateOutUpLeft"></div>
        </div>

        <div class="item">
            <p>rotateOutUpRight </p>
            <div class="dd rotateOutUpRight"></div>
        </div>

        <div class="item">
            <p>slideInDown </p>
            <div class="dd slideInDown"></div>
        </div>

        <div class="item">
            <p>slideInLeft </p>
            <div class="dd slideInLeft"></div>
        </div>

        <div class="item">
            <p>slideInRight </p>
            <div class="dd slideInRight"></div>
        </div>

        <div class="item">
            <p>slideOutLeft </p>
            <div class="dd slideOutLeft"></div>
        </div>

        <div class="item">
            <p>slideOutRight </p>
            <div class="dd slideOutRight"></div>
        </div>

        <div class="item">
            <p>slideOutUp </p>
            <div class="dd slideOutUp"></div>
        </div>

        <div class="item">
            <p>hinge </p>
            <div class="dd hinge"></div>
        </div>

        <div class="item">
            <p>rollIn </p>
            <div class="dd rollIn"></div>
        </div>

        <div class="item">
            <p>rollOut </p>
            <div class="dd rollOut"></div>
        </div>

        <div class="item">
            <p>zoomIn </p>
            <div class="dd zoomIn"></div>
        </div>

        <div class="item">
            <p>zoomInDown </p>
            <div class="dd zoomInDown"></div>
        </div>

        <div class="item">
            <p>zoomInLeft </p>
            <div class="dd zoomInLeft"></div>
        </div>

        <div class="item">
            <p>zoomInRight </p>
            <div class="dd zoomInRight"></div>
        </div>

        <div class="item">
            <p>zoomInUp </p>
            <div class="dd zoomInUp"></div>
        </div>

        <div class="item">
            <p>zoomOut </p>
            <div class="dd zoomOut"></div>
        </div>

        <div class="item">
            <p>zoomOutDown </p>
            <div class="dd zoomOutDown"></div>
        </div>

        <div class="item">
            <p>zoomOutLeft </p>
            <div class="dd zoomOutLeft"></div>
        </div>

        <div class="item">
            <p>zoomOutRight </p>
            <div class="dd zoomOutRight"></div>
        </div>

        <div class="item">
            <p>zoomOutUp </p>
            <div class="dd zoomOutUp"></div>
        </div>

        <div class="item">
            <p>slideInDown </p>
            <div class="dd slideInDown"></div>
        </div>

        <div class="item">
            <p>slideInLeft </p>
            <div class="dd slideInLeft"></div>
        </div>

        <div class="item">
            <p>slideInRight </p>
            <div class="dd slideInRight"></div>
        </div>

        <div class="item">
            <p>slideInUp </p>
            <div class="dd slideInUp"></div>
        </div>

        <div class="item">
            <p>slideOutDown </p>
            <div class="dd slideOutDown"></div>
        </div>

        <div class="item">
            <p>slideOutLeft </p>
            <div class="dd slideOutLeft"></div>
        </div>

        <div class="item">
            <p>slideOutRight </p>
            <div class="dd slideOutRight"></div>
        </div>

        <div class="item">
            <p>slideOutUp </p>
            <div class="dd slideOutUp"></div>
        </div>
    </div>

* {
    margin: 0;
    padding: 0;
}
body{
    font: 14px Microsoft YaHei,Arial;
    color: #444;
}
.wrapper {
    width: 800px;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
}
.tit {
    font: 30px Microsoft YaHei;
    text-align: center;
    margin: 20px auto;
}
.d2 {
    width: 100px;
    height: 100px;
    background: #f22;
    border-radius: 55%;
    margin: 0 auto;
    -webkit-animation: db 3s steps(1) infinite; 
    animation: db 3s steps(1) infinite; 
}
@-webkit-keyframes db {
    33% {background: #2c2;}
    66% {background: #0af;}
}
@keyframes db {
    33% {background: #2c2;}
    66% {background: #0af;}
}
.item {
    margin: 300px 0;
}
.item p {
    color: #444;
    margin: 0 0 -50px 0; 
}
.item:nth-child(2n+1) .dd {
    background: #0cd;
}
.dd {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background: #0be;
    border-radius: 3px;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

本项目引用的自定义外部资源

animate.min.css