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

今天要讓2隻吉祥物動起來~

要使用到CSS Animation，做基礎的動畫的不複雜，只要有影格的觀念，不管過程要有幾格，甚至只要剛開始與最後就這2格也是很可以！

關鍵詞@keyframes、animation

一、貓咪四肢

貓咪的前肢與後肢，原始旋轉角度分別是transform: rotate(20deg)與transform: rotate(-20deg)

這時@keyframes可以寫成這樣

@keyframes catLeft
	from
		transform: rotate(20deg)
	to
		transform: rotate(-20deg)
@keyframes catRight
	from
		transform: rotate(-20deg)
	to
		transform: rotate(20deg)

回到繪製四肢的物件上，分別寫入animation

animation: catLeft .3s infinite ease-in 

animation: catRight .3s infinite ease-in alternate

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

細節可以參考CSS Animation

二、貓咪尾巴

同樣的先在@keyframes設定好影格

@keyframes catTail
	from
		transform: rotate(-20deg)
	to
		transform: rotate(0deg)

接著在尾巴的物件放入animation

animation: catTail .4s infinite ease-in alternate

三、貓咪移動

@keyframes catWalk
	0%
		left: 27rem
	10%
		left: 20rem
	90%
		left: 4rem
	100%
		left: -3rem

貓咪物件

animation: catWalk 40s infinite ease-in

四、樹懶

另一位角色也同樣前幾步驟，慢慢放置想要的動作

@keyframes slothWalk
	0%
		left: -4rem
	10%
		left: 3rem
	90%
		left: 19rem
	100%
		left: 26rem
@keyframes slothBack
	from
		right: -1.4rem
	to
		right: -1.6rem
@keyframes slothFront
	from
		right: -4.3rem
	to
		right: -4.1rem

樹懶移動

animation: slothWalk 60s infinite ease-in

樹懶前肢

animation: slothFront 1.4s infinite

樹懶後肢

animation: slothBack 1.4s infinite ease-in alternate

CSS甜點烘焙店codepen

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