您好，歡迎光臨CSS甜點烘焙店

一、店面出場(.store)

先設定好@keyframes，預設的效果是從天而降，以及有點彈跳的感覺，所以在rotateX做角度的變化，就可以讓店面從正常高度->偏扁->拉高->正常，bottom也依位置做定位調整

@keyframes storeRun
	0%
		bottom: 20rem
	40%
		bottom: 3.6rem
		transform: translateX(-50%) scale(0.8) rotateX(30deg)
	70%
		bottom: 4.4rem
		transform: translateX(-50%) scale(0.8) rotateX(-10deg)
	100%
		bottom: 4rem

接下來設定animation

animation: storeRun .6s forwards ease-in

小提醒 animation: 動畫名稱 / 動畫秒數 / 動畫停止在最後影格 / 動畫速度

二、招牌架出場(.signboardStand)

同上一步驟，設定影格讓招牌架從天而降，並且有彈跳效果

@keyframes signboardStandRun
	0%
		bottom: 23rem
	40%
		bottom: 5.6rem
		transform: scale(0.8) rotateX(30deg)
	70%
		bottom: 6.6rem
		transform: scale(0.8) rotateX(-10deg)
	100%
		bottom: 6rem
		transform: scale(0.8)

招牌架出場要比店面再慢一些，這時可以使用animation-delay

animation: signboardStandRun .6s .4s forwards ease-in

小提醒 animation: 動畫名稱 / 動畫秒數 / 動畫延遲 / 動畫停止在最後影格 / 動畫速度

三、飲料攤出場(.beverageStore)

同前2步驟，針對飲料攤做動畫

@keyframes beverageStoreRun
	0%
		bottom: 24rem
	40%
		bottom: 5.6rem
		transform: scale(0.8) rotateX(30deg)
	70%
		bottom: 6.6rem
		transform: scale(0.8) rotateX(-10deg)
	100%
		bottom: 6rem
		transform: scale(0.8)

設定animation，這次延遲0.8s

animation: beverageStoreRun .6s .8s forwards ease-in

CSS甜點烘焙店codepen
希望今天的動畫呈現您還滿意，請慢用~
如有任何問題，歡迎下方留言討論