從2018“草莓音樂節”的宣傳視頻得到的靈感，海報的主題是錯位拼貼分割重組，對我這種設計渣渣而言，看中的是其平面化，也就是說，用SVG+CSS3動畫完全可以玩轉。因為只涉及一些基礎元素的位移、縮放構成的轉場效果，相對來說比較簡單，但創意很開腦洞。因為宣傳視頻比較長，所以把它分割成了幾個部分，依次來完成。

首先放上一張靜態圖，來分析動效。一共涉及三種動效，位移，旋轉，漸隱漸現。當把元素分析完成后，現在就要在AI中進行相應的分層，便于SVG代碼的解讀。在AI中，對應各個部分，放置到不同的圖層中，每個圖層做好命名，依次為底圖base、向上移動moveUp、向下移動moveDown、中間大圓baceCenter、中間小圓centerCircle、周圍圓點dot。因為涉及Y軸方向的位移動畫，所以在底圖的繪制時，需要移動的部分要超出畫板。

相信很多自學的小伙伴都想學習web前端，可以關注小編后私信【學習】可以免費領取學習地址/案例教程/2018最新的一套學習教程，讓學習有方向。

CSS3部分相對來說比較簡單，旋轉動畫transform:rotate()，位移動畫transform:translateY()，因為小圓點只是裝飾作用，所以只設計了兩種類型的透明度的改變，任意分成了兩組。

@keyframes centerCircle{
0%{transform:rotate(0deg); transform-origin:center center}
100%{transform:rotate(-360deg); transform-origin:center center}
}
 #centerCircle{animation:centerCircle linear 4s infinite ; } /*中心旋轉圓設置*/
@keyframes moveUp{
0% {transform: translateY(0)}
100% {transform: translateY(-70px)}
}
#moveUp {animation:moveUp linear 4s infinite alternate; } /*向上移動*/
@keyframes moveDown{
0% {transform: translateY(0)}
100% {transform: translateY(70px)}
 }
#moveDown {animation:moveDown linear 4s infinite alternate; } /*向下移動*/
@keyframes dot1{
0%{opacity:0}
100%{opacity:1}
}
#dot1{animation:dot1 ease 2s infinite alternate}/*漸隱漸現小圓點樣式1*/
@keyframes dot2{
0%{opacity:0.7}
70%{opacity:0}
100%{opacity:0.3}
}
#dot2{animation:dot2 ease 2s infinite alternate}/*漸隱漸現小圓點樣式2*/

先跑起來看看效果，大塊的色塊，濃郁的色彩，似乎還不錯。

go on。接下來如圖：

三個圓從中心依次出現放大，這是一個基礎的縮放動效transform:scale()。這里就要用到控制SVG描邊屬性縮放文章中提到的描邊屬性不受縮放控制的神句了，三個圓的描邊屬性后面都要加上vector-effect:non-scaling-stroke，由于出現的順序不同，又要疊加其他動畫，為了避免自己搞不清各部分動畫的時間次序（畢竟不是AE，時間軸不直觀），所以繪制了一個簡單的時間軸。

動畫屬性定義中，只要開始的時間依次設置好久可以了，另外關于縮放的倍數，由于從無到有，初始值一定是scale(0)，結束的值和定義的圓的半徑有關，可以多調整幾個值，得到最滿意的效果。

@keyframes purpleCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(1.5);transform-origin:center center}
}
#purpleCircle{animation:purpleCircle linear 1.5s 1s both} /*最大圓 1S后開始擴大*/
@keyframes whiteCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(2);transform-origin:center center}
}
#whiteCircle{animation:whiteCircle linear 1.5s 1.5s both} /*中間圓 1.5S后開始擴大*/
@keyframes blueCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(1);transform-origin:center center}
}
#blueCircle{animation:blueCircle linear 1.5s 2s both} /*最小圓 2S后開始擴大*/

合成后效果如下：

go on……

如上圖所示，當白色圓擴展到整個畫布后，中間出現兩個三角，三角的變形動畫如下：

為了方便定義屬性，我以三角形斷開時的形狀為基準，因為第一步是Y軸向的縮放，X軸不變，所以僅定義transform:scaleY()，而在第二步變形中，X軸向與Y軸向縮放時不同步的，因此要分開寫成transform:scaleX()scaleY()。為了確保第一步統一的變形效果，要先把兩個三角都放在一個組中，給這個組進行變形動畫。

<g id="triangle">
<polygon id="triLeft" points=""/> <!--左側三角-->
<polygon id="triRight" points=""/> <!--右側三角-->
</g>

動畫屬性中需要注意的是transform-origin變形基點的定義。當兩個三角斷開后，基點對應如下：

@keyframes triangle{
0% {transform:scaleY(0);transform-origin:}
100%{transform:scaleY(1);transform-origin:} /*變形的基點為交點坐標*/
} 
#triangle{animation:triangle linear 0.5s 2.5s both} /*兩個三角形Y軸向擴大*/
@keyframes triLeft{
0% {transform:scaleY(1)scaleX(1);transform-origin:} /*變形的基點為左側邊中點坐標*/
100%{transform:scaleY(0.15)scaleX(0.05);transform-origin:}
} 
#triLeft{animation:triLeft linear 0.5s 3s both} /*左側三角形向左水平縮小*/
@keyframes triRight{
0% {transform:scaleY(1)scaleX(1);transform-origin:} /*變形的基點為右側邊中點坐標*/
100%{transform:scaleY(0.6)scaleX(0.5);transform-origin:}
} 
#triRight{animation:triRight linear 0.5s 3s both} /*右側三角形向右水平縮小*/

看下效果，似乎不錯，截止到這一步，第一階段的動畫才算完成，之所以稱作第一階段，是因為這時原底圖可以退出舞臺，全新的下一幕開始了。

這里右側圓形實現這種效果有點復雜，在SVG剪切蒙版屬性clip-path文章中詳細說明了實現過程。 各部分圖形的順序至關重要。

來看下效果

好了，第二部分也正式結束，第三部分相對簡單一些，基本只有透明度的屬性變化。和第一部分底圖的圓點的動效基本相似，無非圖形更復雜一些，就不再贅述，直接放上最終效果吧。

唯一需要說的是左上角類似漸變網格的圓點，使用了運動的漸變蒙版來實現。

首先需要定義一個蒙版的位移動效@keyframes maskXY{
0%{transform:translate(0, 0);}
100%{transform:translate(-70px, -70px); } /*向左上角位移*/
}
#maskXY{animation:maskXY linear 3s 5s both} 

漸變類型的定義和圖形是AI導出時生成的，一般不用修改，只是各種定義比較多，別把自己繞進去就行。