实例示范：用三个圆圈制作一个页面加载动画效果，圆圈由隐藏变为出现再变为隐藏，具体代码如下：

    HTML部分：

    <divclass="spinner">

    <divclass="bounce1"></div>

    <divclass="bounce2"></div>

    <divclass="bounce3"></div>

    </div>

    CSS3部分：

    .spinner{

    margin:100pxauto0;

    width:150px;

    text-align:center;

    }

    .spinner>div{

    width:30px;

    height:30px;

    background-color:#67CF22;

    border-radius:100%;

    display:inline-block;

    -webkit-animation:bouncedelay1.4sinfiniteease-in-out;

    animation:bouncedelay1.4sinfiniteease-in-out;

    /*Preventfirstframefromflickeringwhenanimationstarts*/

    -webkit-animation-fill-mode:both;

    animation-fill-mode:both;

    }

    .spinner.bounce1{

    -webkit-animation-delay:-0.32s;

    animation-delay:-0.32s;

    }

    .spinner.bounce2{

    -webkit-animation-delay:-0.16s;

    animation-delay:-0.16s;

    }

    @-webkit-keyframesbouncedelay{

    0%,80%,100%{-webkit-transform:scale(0.0)}

    40%{-webkit-transform:scale(1.0)}

    }

    @keyframesbouncedelay{

    0%,80%,100%{

    transform:scale(0.0);

    -webkit-transform:scale(0.0);

    }40%{

    transform:scale(1.0);

    -webkit-transform:scale(1.0);

    }

    }









本文转载自中文网