好久沒用css3製作動畫效果了，今天看到個題目有關CSS3 @keyframes規則的，就來學習回顧一下:

先附上我寫得一個小載入動畫，有些醜，不過咱們要抓住重點，話說得好，不要在意細節/?：

效果圖： 

程式碼（只寫了支援Safari 和 Chrome的）：

html:

<div class="loading">
    <span class="center-block"></span>
    <span class="moving-block"></span>
</div>

css:

.loading {
    display: table;
    margin: 0 auto;
    position: relative;
}
        
.loading .center-block {
    display: block;
    width: 50px;
    height: 50px;
    margin: 20px;
    background: rgb(40, 171, 214);
}
        
.loading .moving-block {
    display: block;
    width: 10px;
    height: 10px;
    margin: 5px;
    background: rgb(40, 171, 214);
    position: absolute;
    animation: loading 1s linear infinite;
}
        
@-webkit-keyframes loading {
    0% {
        top: 0;
        left: 0;
        bottom: unset;
        right: unset;
    }
    25% {
        top: 0;
        left: unset;
        bottom: unset;
        right: 0;
    }
    50% {
        top: unset;
        left: unset;
        bottom: 0;
        right: 0;
    }
    75% {
        top: unset;
        left: 0;
        bottom: 0;
        right: unset;
    }
    100% {
        top: 0;
        left: 0;
        bottom: unset;
        right: unset;
    }
}
 

CSS3 @keyframes 規則：

• 瀏覽器支援:

Internet Explorer 10、Firefox 以及 Opera 支援 @keyframes 規則和 animation 屬性。

Chrome 和 Safari 需要字首 -webkit-。

Internet Explorer 9，以及更早的版本，不支援 @keyframe 規則或 animation 屬性。

• 例項：

設定動畫：

/* Safari 和 Chrome */
@-webkit-keyframes mycolorchange 
{
    from {
        background: red;
    }
    to {
        background: yellow;
    }
}
 

在我的簡易載入動畫中，用的使0%-100%這種方式，和from-to使一樣的，只不過用百分比可以轉化多次，而from-to只能變化一次（一個迴圈內）。

使用：在需要使用動畫的元素樣式中新增程式碼：

/* Safari 和 Chrome */
-webkit-animation: mycolorchange 1s infinite;

其中mycolorchange 為@keyframes 動畫名稱，1s為動畫完成一個週期所花費的秒數(可設定為毫秒)，infinite為播放次數，此值代表無限。如果想看到動畫效果，至少規定動畫的名稱和時長。當然，還有一些可選項(轉自w3school)：