# scss製作影格動畫
只要了解動畫原理，就可以用簡單的動畫，堆疊成複雜的動畫。
這次做的動畫會有幾個重點：
1. 讓每個動畫只做單純的事情，最內層.ball只負責位移，外層.container負責旋轉
2. 讓動畫在讀取前就已經執行，負值的animation-delay
3. 利用scss的for迴圈，讓每個元素容器產生不同的旋轉角度與時間差
----
### html
先來看html的結構，外層一個middle裡面一個container
負責旋轉的角度，內層的ball負責製作位移，總共產生30組。

.middle
    .container1
        .ball 
    .container2
        .ball 
    .container3
        .ball 
    .....
    .container30
        .ball 

### scss
為了讓所有的球都從中心點出發，會利用絕對定位把30顆球都重疊。
製作一個x位移100px的關鍵影格用來套用在每個ball上面

@keyframes ballani{
	0% { transform:translateX(0px) }
	100% { transform:translateX(100px)}
}

.ball{
	@include size(20px);
	border-radius:50%;
	position:absolute;
	background-color:#fff;
	animation: ballani 2s infinite alternate;
}

因為絕對定位的關係，所有的球都會重疊再一起，這時只會看到一個從中心點往右偏移100px的球。

再來就靠外層的container來控制旋轉的角度。但因為1~30個container都要旋轉不同的角度，所以利用scss的@for迴圈，從container1跑到30。

@for $i from 1 through 30 {
    .container#{$i}{
        transform:rotate(#{$i*360/30}deg)
    }
}

旋轉的角度為： `360度/30顆球 = 12度`
用算出來的度數，再乘以1~30，第一顆轉12*1度、第二顆轉12*2度、第三顆轉12*3度...以此類堆，就可以得到一個從中心向外發散的一個圓。

得到這個圓之後，接下來要做的就是讓每顆球產生不同的時間差，這時候就要在container#{$i}裡面的ball個別加上animation-dely

@for $i from 1 through 30 {
	.container#{$i}{
		transform:rotate(#{$i*360/30}deg);
		.ball{ animation-delay:$i*.1s}
	}
}

為了讓動畫看起來是連貫的，不要有暫停，所以可以加上變成負數的delay。`.ball{ animation-delay:-$i*.1s}`這樣就不會有任何間斷的時間了

可以再為動畫加上一點顏色與大小的漸變，看起來會更活潑一些。

[codepen範例](https://https://codepen.io/abbyd0208/pen/ZEBxwXr)

###### tags: `scss`