HTML+CSS3写弹力球

主要CSS3样式代码如下：

#tan{
    /*宽度*/
    width: 100px;
    /*高度*/
    height: 100px;
    /*设置背景颜色*/
    background-color: red;
    /*画一个圆形*/
    border-radius: 50%;
    /*使用绝对定位*/
    position: absolute;
    top: 300px;
    left: 500px;
    /*让小球从上到下运动   */
    animation: tiao 900ms ease-in-out infinite alternate;
}
#ying{
    width: 50px;
    height: 25px;
    position: absolute;
    top: 560px;
    left: 550px;
    border-radius:50% ;
    background-color: #C3C3C3;
    /*阴影小球X轴倾斜度数*/
    transform: translate(0px) rotateX(70deg);
    /*阴影小球运动*/
    animation: bian 900ms ease-in-out infinite alternate;

}
@keyframes bian {
    from{
        roate(1.0)
    }
    to{transform: scale(1.2)}
}
@keyframes tiao {
    from{
        top: 400px;
    }
    to{
        top: 450px;
    }
}

HTML样式如下：

<div id="tan"></div>
<div id="ying"></div>