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

今天終於是第30天了，就讓最後的小動畫來完結這一切吧~

一、抖抖森林(.forest)

首先看一下原本.forest的設定

position: absolute
width: 100vw
height: 100vh
top:0
left: 0

沒有任何transform的屬性，所以可以利用skewX做傾斜
transform: skewX(5deg)

但因為skewX後，樹根的定位點就跑掉了，所以用translateX調整回原位

transform: skewX(5deg) translateX(-0.4rem)

影格如下

@keyframes forestRun
	0%
		transform: skewX(5deg) translateX(-0.4rem)
	100%
		transform: skewX(0) translateX(0)

動畫

animation: forestRun 3s infinite alternate ease-in

就完成會左右擺動的森林

小提醒 animation: 動畫名稱 / 動畫秒數 / 循環 / 正反向播放 / 動畫速度

二、飄飄雲朵

設定其中一朵雲，右進左出

@keyframes skyRun
	from
		right: -20%
	to
		right: 100%

動畫部份同樣也是要設定alternate，就會左右來回跑

animation: skyRun 40s infinite alternate ease-in

歡迎來店裡參觀
CSS甜點烘焙店codepen

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

完賽心得

其實想要參賽，是在報名日期前2天才臨時決定的，到底是哪來的勇氣看著各位大大都是前2~3個月前就準備，甚至有些是寫完30天內容才準備參賽。不過當時就想著，在這行打滾多年了，都沒有留一些"痕跡"，未來可能會有些遺憾。既然本身是設計出身，擅長CSS，工作之餘又熱愛烘焙，不如就用CSS來開一間烘焙店吧！

能完成30天真的是偷笑，中間又非常幸運的確診，平日還要顧2隻屁孩、假日陪玩，還好大綱早在靈光乍現當天就定下來，不用天天為了產出內容煩惱。但回頭想想，這30天的內容比較像是作品集的概念，因為光做出成品就快來不及了比較少以教學角度來產出，這點是比較可惜，未來會再以不同角度來發文，期待讓更多人能認識不同面貌的CSS。

連續30天發文，真的是一個很棒的習慣養成

「自己的世界非靠自己改變不可」──《交響情人夢》

改變自己，就先從小地方開始吧！

CSS甜點烘焙店codepen