[CSS100] Day 11 Walking Boots
Cathy P
 2022-04-13 23:18:21      

Walking Boots Demo

See the Pen CSS100Days 011 by Cathy (@smile25896) on CodePen.

這次的主題是要模擬鞋子走路的動畫，關於 css 動畫的語法介紹，可以參考這篇 [CSS100] Day 02 Menu Icon。

這題就像是應用題，我們之前學過怎麼做動畫了，那麼該怎麼模擬走路的樣子呢？

先模擬腿的部分

html 和 基本 css 的部分我就不佔篇幅描述，這邊只著重在跟動畫有端的部分。

我們先來看一下在腿的動畫，我們預計要達到的效果：

很明顯的這是對腿部的地方加上旋轉的動畫，旋轉的軸心在腿部的上方，因此我們設定 transform-origin: top 調整旋轉的軸心：

1
2
3
.leg {
  transform-origin: top;
}

接著我們要來設定腿部動畫的關鍵影格，
動畫的開頭和結尾都設定 30deg 的旋轉，中間 50%的地方設定 -30deg的旋轉，
右腳則是相反，50%的地方都設定 30deg 的旋轉，開頭和結尾的部分設定 -30deg的旋轉，程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@keyframes walk {
  0%,
  100% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}
@keyframes walk-r {
  0%,
  100% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(30deg);
  }
}

並套上動畫：

1
2
3
4
5
6
7
.right {
  animation: walk-r 2s ease-in-out infinite;
}

.left {
  animation: walk 2s ease-in-out infinite;
}

再模擬鞋子的部分

目前看起來只有腿在旋轉，非常的不自然因此我們再加上鞋子的動畫，讓他有踏地的感覺：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@keyframes walk-shoe {
  0%,
  100% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(-15deg) translate(0, -5px);
  }
  25% {
    transform: rotate(-5deg) translate(0, -40px);
  }
  50% {
    transform: rotate(5deg) translate(0, -5px);
  }
  62.5% {
    transform: rotate(15deg) translate(0, 5px);
  }
  75% {
    transform: rotate(0deg) translate(0, 5px);
  }
}

.right {
  .shoe {
    animation: walk-shoe 2s linear infinite;
    animation-delay: 1s;
  }
}

.left {
  .shoe {
    animation: walk-shoe 2s linear infinite;
  }
}