Cùng làm hình động với CSS Animation (p2)

Chào các bạn, sau bài đầu tiên 'Cùng làm họa sĩ với CSS Shapes', hôm nay mình sẽ tiếp tục hướng dẫn các bạn làm hình động với Animation trong CSS
Như trong bài trước, ở cuối bài mình đã cùng các bạn vẽ hình pac man và ghost
Như các bạn đã biết ( hoặc sắp biết) thì trong game pacman, pacman có 2 hành động là mở miệng và ngậm miệng liên tục
nên giờ mình sẽ làm cho pacman có thể cử động và để làm được như vậy, mình sẽ dùng tới animation trong css,
cụ thể như sau, trước tiên, ở bài trước mình đã vé được pacman há miệng, giờ sẽ vẽ ngậm miệng.

Pac-man mở miệng:

<div id="pacman"><div id="eye"> </div> </div>

CSS:

#pacman {
	width: 0px;
	height: 0px;
    border-right: 60px solid transparent;
    border-top: 60px solid yellow;
    border-left: 60px solid yellow;
    border-bottom: 60px solid yellow;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}
#eye {
	width: 15px;
    height: 15px;
    background-color: black;
    border-radius: 50%;
    position: relative;
    bottom: 45px;
    right: 10px;
}

Pac-man ngậm miệng: (sửa lại như thế này là ok)

border-top-left-radius: 75px;
border-bottom-right-radius: 75px;

Vậy là ok, giờ là làm cho pacman tự động chuyển từ trạng thái ngậm sang mở và ngược lại, vậy phải làm thế nào đây,
chúng t sẽ dùng tới animation trong css

//khai báo tên function sẽ dùng
animation-name: closeOpenMouth;
//thời gian  function đó sẽ thực hiện;
animation-duration: 3s;
//số lần thực hiện, ở đây mình để vô hạn
animation-iteration-count: infinite;

và hàm mình sẽ sử dụng

@keyframes closeOpenMouth {
   0% {
     border-top-left-radius: 75px;
    border-bottom-right-radius: 75px;
  }
  20% {
     border-top-left-radius: 72px;
    border-bottom-right-radius: 72px;
  }
  40% {
     border-top-left-radius: 69px;
    border-bottom-right-radius: 69px;
  }
  60% {
     border-top-left-radius: 66px;
    border-bottom-right-radius: 66px;
  }
  80% {
     border-top-left-radius: 63px;
    border-bottom-right-radius: 63px;
  }
  100% {
   border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
  }
}

Nếu bạn muốn pacman sinh động hơn, có thể làm nó di chuyển bằng cách thêm vào #pacman thuộc tính

position: absolute;
left: 0;

và thêm vào trong keyframe

@keyframes closeOpenMouth {
   0% {
     left: 0;
     border-top-left-radius: 75px;
    border-bottom-right-radius: 75px;
  }
  20% {
    left: 20px;
     border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
  }
  40% {
        left: 40px;
     border-top-left-radius: 75px;
    border-bottom-right-radius: 75px;
  }
  60% {
    left: 60px;
     border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
  }
  80% {
        left: 80px;
     border-top-left-radius: 75px;
    border-bottom-right-radius: 75px;
  }
  100% {
    left: 100px;
   border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
  }
}

Vậy đã xem như xong phần cử động cho pacman, bạn có thể tham thảo ở đây
Hẹn gặp lại các bạn ở bài tiếp theo, chúng t sẽ làm ma chạy