animation动画非常强大，快速掌握它多亏以前做过两年的flash开发，回想起十多年前用flash做动画的时候，曾经也有一个闪客梦，说这些话只能证明我老了！！

点击查看具体效果。

别小看这三个弹跳的小球球，分别代表了animation动画三种基本方式：

1、利用%时间轴控制运动的速度。

2、利用贝塞尔cubic-bezier控制运动的速度。

3、多段animation动画，每段动画单独控制。

具体的教程可以去看：

CSS3第十二课：强大的多时间段animation动画！

CSS3第十三课： steps animation逐帧动画，你不应该错过的最详篇！

案例核心代码：

        .wrap {
            position: absolute;
            left:50%;
            top:20px;
            margin-left:-50px;
            width: 100px;
            height:300px;
        }

        .ball {
            position:absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: radial-gradient(at 80% 20%, rgb(255, 213, 151), #f90, #f00, rgb(114, 0, 0));
            animation: ball 2s cubic-bezier(1,-0.42,0,1.52) infinite;
            transform-origin: center bottom;
            z-index: 2;
        }
       

        .shadow {
            position:absolute;
            width: 50px;
            height: 20px;
            left:25px;
            top:410px;
            border-radius: 50%;
            background: radial-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 70%,rgba(0, 0, 0, 0));          
            z-index: 1;  
            animation:shadow 2s cubic-bezier(1,-0.42,0,1.52) infinite;
        }
        .wrap1{
            position:absolute;
            width:70px;
            height:200px;
            left:200px;
            top:100px;
        }
        .ball1{
            position:absolute;
            width:70px;
            height: 70px;
            border-radius: 50%;
            background: radial-gradient(at 80% 20%,rgb(245, 121, 228),rgb(178, 15, 211),#220474,rgb(3, 1, 41));
            transform-origin:center bottom;
            z-index: 2;
            animation:ball1 2s linear infinite;
        }
        .shadow1{
            position:absolute;
            width:35px;
            height: 14px;
            border-radius: 50%;
            background: radial-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 70%,rgba(0, 0, 0, 0));  
            z-index: 1;
            left:17px;
            bottom:-80px;
            animation:shadow1 2s linear infinite;
        }
        .wrap2{
            position:absolute;
            right:200px;
            top:0;
            width:60px;
            height: 300px;
        }
        .ball2{
            position:absolute;
            left:0;
            top:-60px;
            z-index: 2;
            width:60px;
            height: 60px;
            border-radius: 50%;
            background: radial-gradient(at 80% 20%,#ddd9a4,#1475f5,#071377,#110024);
            animation: ball2-1 2s ease-in,ball2-2 1.33s ease-out 2s,ball2-3 1.33s ease-in 3.33s,ball2-4 0.665s ease-out 4.66s,ball2-5 0.665s ease-in 5.325s forwards,ball2-6 4s ease-out 6s forwards;
        }
        .shadow2{
            position:absolute;
            width:30px;
            height: 12px;
            border-radius: 50%;
            background: radial-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 70%,rgba(0, 0, 0, 0));  
            z-index: 1;
            left:15px;
            bottom:0;
           
        }

        @keyframes ball {
            0% {
                transform: translate(0, 0);
            }

            50% {
                transform: translate(0, 300px);
            }
        }
        @keyframes ball1 {
            0% {
                transform: translate(0, 0);
            }
            80% {
                transform: translate(0, 200px);
            }
            81%{
                transform: translate(0,200px) scale(1.25,.8);
            }
        }
        @keyframes ball2-1 {
            0% {
                transform: translate(0, 0);
            }
           99%{
               transform: translate(0,300px);
           }
           100%{
               transform: translate(0,300px) scale(1.25,0.8);
           }
        }
        @keyframes ball2-2 {
            0% {
                transform: translate(0, 300px) scale(1.25,0.8);
            }
           100%{
               transform: translate(0,100px) scale(1);
           }
        }
        @keyframes ball2-3 {
            0% {
                transform: translate(0, 100px);
            }
            99%{
                transform: translate(0,300px);
            }
           100%{
               transform: translate(0,300px) scale(1.1,0.91);
           }
        }
        @keyframes ball2-4 {
            0% {
                transform: translate(0, 300px) scale(1.1,0.91);
            }
           100%{
               transform: translate(0,200px) scale(1);
           }
        }
        @keyframes ball2-5 {
            0% {
                transform: translate(0, 200px);
            }
           100%{
               transform: translate(0,300px);
           }
        }
        @keyframes ball2-6 {
            0% {
                transform: translate(0, 300px);
            }
           100%{
               transform: translate(200px,300px) rotate(360deg);
           }
        }
        @keyframes shadow{
            0%{
                transform:scale(1);
            }
            50%{
                transform:scale(2);
            }
        }
        @keyframes shadow1{
            0%{
                transform:scale(1);
            }
            80%{
                transform:scale(2);
            }
        }