一、transform 和@keyframes動畫的區別：

@keyframes動畫是迴圈的，而transform 只執行一遍.

二、@keyframes

CSS3中新增的新屬性animation是用來為元素實現動畫效果的，但是animation無法單獨擔當起實現動畫的效果。承載動畫的另一個屬性——@keyframes。使用的時候為了相容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等字首以適應不同的瀏覽器。

• 建立動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。

• 通過 @keyframes 規則，您能夠建立動畫。

• @keyframes定義一個動畫，並定義具體的動畫效果，比如是放大還是位移等等。

• @keyframes 它定義的動畫並不直接執行，需要藉助animation來運轉。

• 在動畫過程中，您能夠多次改變這套 CSS 樣式。

• 以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。

  百分比是指動畫完成一遍的時間長度的的百分比 ，0% 是動畫的開始時間，50%是動畫完成一半的時間，100% 動畫的結束時間。百分比後面的花括號寫：在動畫執行過程中的某時間點要完成的變化。

• 為了獲得最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。

語法

    @keyframes animationname {keyframes-selector {css-styles;}}
 

例子1：

名字為gif的@keyframes ，動畫完成需要的總時長為1.4s,剛開始的時候圖片旋轉為0度，動畫完成的時候圖片旋轉360度

.load-border {
    width: 120px;
    height: 120px;
    background: url(../images/loading_icon.png) no-repeat center center
 
;
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

例子2：

名字為mymove的@keyframes ，動畫完成需要的總時長為1s,剛開始的時候圖片距頂部距離為0px，0.25s後圖片距頂部距離為200px，0.5s後圖片距頂部的距離為100px，以此類推

.img {
    width: 120px;
    height: 120px;
    background: url(../images/icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: mymove 1s infinite linear;
}
@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

例子3：

在一個動畫中改變多個 CSS 樣式：

@keyframes mymove
{
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
}

三、下面來說說transform：

transform的含義是：改變，使…變形；轉換。

transform的屬性包括：rotate()（旋轉） / skew()（傾斜） / scale()（比例） / translate()（位移） ，分別還有x、y之分，比如：rotatex() 和 rotatey() ，以此類推。

各個屬性的用法：

• transform:rotate()：旋轉；其中“10deg”表示“10度”。

    transform: rotate(10deg);

• transform:skew()：傾斜；

transform: skew(20deg);

• transform:scale()：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，須寫成“2.0”，縮小則為負“-”。

transform: scale(1.5);

• transform:translate()：變動，位移；如下表示向右位移120畫素，如果向上位移，把後面的“0”改個值就行，向左向下位移則為負“-”。

transform: translate(120px,0);

• 綜合在一起：(效果是動態)

transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);