以下是執行截圖：

利用css3屬性@keyframe定義兩個動畫，分別實現車子輪子旋轉、以及車身移動的動畫roll和move！具體程式碼如下：

@keyframes  roll {
    0% {


        transform:rotate(72deg);
    }
    20% {


        transform:rotate(144deg);
    }
    40% {
        transform:rotate(216deg);
    }
    60% {
        transform:rotate(288deg);
    }
    80% {
        transform:rotate(360deg);
    }
    100% {
        transform:rotate(432deg);
    }
}

@keyframes  move {
    0% {


        left: 50px;
        top: 92px;
    }
    20% {


        left: 100px;
        top: 80px;
    }
    40% {
        left: 150px;
        top: 70px;
    }
    60% {
        left: 200px;
        top: 65px;
    }
    80% {
        left: 250px;
        top: 58px;
    }
    100% {
        left: 300px;
        top: 48px;
    }


}

分別加上字首重新定義適應各瀏覽器的動畫以相容各種不同瀏覽器！

定義好動畫之後就可以定義一個class並用animation的屬性把動畫新增進來。

.btnAnimation {
    animation:roll 1s linear 0s normal infinite;
    -ms-animation:roll 1s linear 0s normal infinite;
    -moz-animation:roll 1s linear 0s normal infinite;
    -o-animation:roll 1s linear 0s normal infinite;
    -webkit-animation:roll 1s linear 0s normal infinite;
}

.go {
    animation:move 3s linear 0s alternate infinite;
    -moz-animation:move 3s linear 0s alternate infinite;
    -o-animation:move 3s linear 0s alternate infinite;
    -ms-animation:move 3s linear 0s alternate infinite;
    -webkit-animation:move 3s linear 0s alternate infinite;
}

然後利用jquery給“輪子”和車身加上btnAnimation和go類從而實現動畫！

此外“跑道”和“車子”的傾斜是用transform：rotate（-10deg）實現的。

.road {
    position: relative;top: 95px;
    height: 2px;
    border: 0;
    background-color: #fff;
    transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -webkit-transform:rotate(-10deg);
    -o-transform:rotate(-10deg);
    -o-transform:rotate(-10deg);
}

利用css3可以寫出各種各樣的有趣的動畫，本人也剛開始學，有時就會做些小東西練練手！

有興趣的童鞋可下載原始碼看看！（包含有其他頁面，本來是要做一個投票系統的！）

PS：發現一個問題。使用transform：rotate（）屬性之後，border會有輕微變形（有種波浪線的感覺）！