@keyframes spin {
    from { transform: 
        translate(50%, 150px) rotate(0turn) translate(-50%, -150px)
        translate(50%, 50%) rotate(1turn) translate(-50%, -50%); }
    to { transform: 
        translate(50%, 150px) rotate(1turn) translate(-50%, -150px)
        translate(50%, 50%) rotate(0turn) translate(-50%, -50%); }
}
.avatar {
    animation: spin 10s infinite linear;
}

上面的代碼特意把transform的值分成兩行，分別代表原來的兩個(gè)元素各自的變換函數(shù)。到此，這段代碼就已經(jīng)可以讓單個(gè)元素達(dá)成前文的兩個(gè)元素的效果了。不過，這段代碼還比較冗長，可以再做一點(diǎn)簡化。

我們很清楚transform的變換函數(shù)的順序很重要，不能隨意交換，但相鄰的同類變換函數(shù)可以考慮合并。

首先，可以找到位于中間的translate(-50%, -150px)和translate(50%, 50%)可以合并，得到translateY(-150px) translateY(50%)（百分比和像素值則不能再合并）。

然后，以from的部分為例，注意rotate(0turn)和rotate(1turn)分別來自原來的兩個(gè)元素，它們的角度值是為了互相抵消準(zhǔn)備的，因此必須和為360deg（1turn = 360deg）：其中一個(gè)的角度值為x，另一個(gè)則為360 - x。

也就是說，元素在rotate(0turn)之前（未發(fā)生旋轉(zhuǎn)），和rotate(1turn)之后（發(fā)生了兩次旋轉(zhuǎn)），元素的角度是一致的（合計(jì)剛好轉(zhuǎn)了360deg），此時(shí)發(fā)生的translate()也可以合并。以此找到最前的translate(50%, 150px)和最后的translate(-50%, -50%)，它們可以合并，得到translateY(150px) translateY(-50%)。

至此，代碼變?yōu)椋?/p>

@keyframes spin {
    from { transform: 
        translateY(150px) translateY(-50%) rotate(0turn) 
        translateY(-150px) translateY(50%) rotate(1turn); }
    to { transform: 
        translateY(150px) translateY(-50%) rotate(1turn) 
        translateY(-150px) translateY(50%) rotate(0turn); }
}
.avatar {
    animation: spin 10s infinite linear;
}

代碼雖然看起來沒怎么變短，但變換函數(shù)更細(xì)致明確了。最后，注意最開始的兩個(gè)translateY()，它們在from和to里都是一樣的，因此，完全可以在動畫之外，一開始就把元素放在那個(gè)位置，從而消除這兩個(gè)translateY()。

實(shí)際上，這兩個(gè)translateY()的位移做的事就是把這個(gè)元素放到環(huán)形路徑的圓心。

這樣，代碼再變?yōu)椋?/p>

@keyframes spin {
    from { transform: 
        rotate(0turn) 
        translateY(-150px) translateY(50%)
        rotate(1turn); }
    to { transform: 
        rotate(1turn) 
        translateY(-150px) translateY(50%) 
        rotate(0turn); }
}
.avatar {
    animation: spin 10s infinite linear;
}

這就是精簡后的單元素環(huán)形路徑平移的解決方案了。代碼直觀看上去，可能會覺得比較難理解，畢竟它是我們經(jīng)過前面這樣一大段的分析推理得到的。

盡管如此，也有一篇文章介紹了如何直接理解這段環(huán)形路徑平移的代碼，推薦有興趣的你看看。

在環(huán)形平移路徑的代碼的基礎(chǔ)上，改變起點(diǎn)或終點(diǎn)的圓環(huán)半徑，可以得到螺旋路徑：

@keyframes spin {
    from { transform: 
        rotate(0turn) 
        translateY(-150px) translateY(50%)
        rotate(2turn); }
    to { transform: 
        rotate(2turn) 
        translateY(-50px) translateY(50%) 
        rotate(0turn); }
}

對應(yīng)的效果：

這里為了體現(xiàn)螺旋效果，把圈數(shù)增加到了2圈。

把兩個(gè)環(huán)形各取一半拼在一起，就可以得到S型路徑。參考環(huán)形路徑平移的方案，做一些調(diào)整，就可以得到S型路徑平移的寫法：

@keyframes spin{
    0%{
        transform: 
            rotate(-90deg) translateX(50px) rotate(90deg);}
    49.9%{
        transform: 
            rotate(-270deg) translateX(50px) rotate(270deg);}
    50.0% {
        transform: 
            translateY(100px) rotate(-90deg) translateX(50px) rotate(90deg);}
    100% {
        transform:
            translateY(100px) rotate(90deg) translateX(50px) rotate(-90deg);}
}

這里初始把元素放在了上面那個(gè)半圓環(huán)的圓心，然后在50.0%的關(guān)鍵幀位置切換為下面的半圓環(huán)路徑。由于這個(gè)切換過程會讓元素小小地停滯一下，并不是我們想要的動畫，所以這里用帶小數(shù)的關(guān)鍵幀位置來盡可能縮短它的時(shí)長，使整個(gè)動畫更平滑。最終效果是：

matrix()是transform里一個(gè)特殊的變換函數(shù)，它可以通過矩陣乘法把rotate()、translate()等其他變換函數(shù)全部合并在一起。但是，matrix()并不能簡化本文的動畫代碼，因?yàn)閏ss動畫將無法確認(rèn)如何生成關(guān)鍵幀之間的補(bǔ)間動畫，如果關(guān)鍵幀里只有一個(gè)合并后的matrix()，css動畫只會按照平鋪的方式去完成過渡。

以文章最開始的旋轉(zhuǎn)動畫為例，rotate(1turn)轉(zhuǎn)換后是matrix(1, 0, 0, 1, 0, 0)，但如果直接寫：

@keyframes spin {
    to {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

結(jié)果就是，什么也不會發(fā)生。

只通過一個(gè)transform加上一段神秘代碼，就可以做這樣特別的動畫，我覺得是很有意思的。希望本文的這樣一番解讀，可以幫助你加深對css的transform的理解。

（重新編輯自我的博客，原文地址：http://acgtofe.com/posts/2016...）