摩天樓

轉變 (transform)

在前一篇，我們介紹到了動畫，可以使用關鍵影格來改變元素的大小、位置、色彩等等等，透過動畫的次要屬性(例如animation-duration或animation-iteration-count)來展現動畫的演出初始到結束的過程。

但是，除了改變元素的樣式，還有另一種方法，那就是前面幾篇也一直使用到的transform屬性，它僅僅是改變了視覺呈現的效果，但不會改變原始元素所定義的樣式，在之前的任務中，就很常利用在:hover內，配合過渡屬性transition增加互動按鈕的使用者體驗。

範例codepen在這

• 這裡我們使用先來定義兩個關鍵影格：

@keyframes move-right1 {
	0% {}

	25% {
		left: 0;
		width: 204px;
	}
    /* 1. 寬度拉長成204px */

	50% {
		left: 104px;
		width: 100px;    
	}
    /* 2. 寬度縮回來100px，向右邊移動104px */

	75% {
		left: 0px;
		width: 204px;
	}
    /* 3. 寬度再拉長成204px，向左退回104px */

	100% {}

}

@keyframes move-right2 {
	0% {}

	25% {
		transform: translateX(50%) scaleX(2);
	}
    /* 1. X軸方向移動50%的長度，並且在X軸方向放大2倍 */

	50% {
		transform: translateX(100%) scaleX(1);
	}
    /* 2. X軸方向移動100%的長度，並且在X軸方向縮小回1倍  */

	75% {
		transform: translateX(50%) scaleX(2);
	}
    /* 3. X軸方向移動回50%的長度，並且在X軸方向再次放大2倍*/

	100% {}

}

• 接著將這兩個動畫套用在2個元素之上。

.box1 {
	animation: move-right1 3s ease-in-out infinite;
}

.box2 {
	animation: move-right2 3s ease-in-out infinite;
}

• 注意到當動畫進展到50%時不一樣的地方了嗎
  

過渡效果(transition)

這個屬性是定義在原本的元素中，意思就是在不同元素的狀態轉換時，用來定義的過渡效果，例如：

.box3 {
	transition: all ease-in-out .75s;
}

.box3:hover {
	transform: translateX(50%) scale(2, 1);
}
/* 滑鼠移到元素區塊上時，X軸方向移動50%的長度，並且在X軸方向放大2倍*/

.box3:active {
	transform: translateX(100%) scale(1, 1);    
}
/* 滑鼠點擊元素區塊時，X軸方向移動100%的長度，並且在X軸方向縮小回1倍*/

了解動畫的運作原理之後，完成摩天樓的任務吧！

下篇：揮揮手(上)

引用與資源：
freecodecamp
mdn_web_docs_transform
我的摩天樓．改