Cách animation con cún gật đầu bằng css

Chào các bạn, nếu như bình thường, mọi người nghĩ rằng chỉ dùng ảnh gif mới có thể tạo được hình một con cún đang gật đầu, tuy nhiên hôm nay mình sẽ giới thiệu các bạn các tạo animation một con cún gật đầu chỉ với css. Thật bất ngờ phải không?

Đầu tiên chúng ta cần chuẩn bị markup như dưới đây: Ta cần một thẻ container, sau đó chia thành 2 phần đầu cún và thân cún. Với đầu chú cún ta sẽ dùng 1 thẻ image có link như phía dưới

<div id=container>
  <div class="dog-head">
    <img src="http://www.clker.com/cliparts/j/3/Z/Y/D/5/dog-head-md.png">
  </div>

  <div class="dog-body">

  </div>
</div>

Sau đó đến phần xử lý thân và chuyển động gật đầu của chú cún

#container {
    margin-top: 50px;
    margin-left: 200px;
}

.dog-head {
  z-index: 100;
  -webkit-animation: head-move 1s ease-in-out infinite;
}

div.dog-body {
  height: 300px;
  width: 225px;
  margin-top: -175px;
  margin-left: 40px;
  background-image: url('http://www.clker.com/cliparts/T/0/9/J/e/4/dog-body-md.png');
  background-repeat: no-repeat;
}



/*ANIMATIONS
---------------------------------------------------------*/

@-webkit-keyframes head-move {
  50% { 
    -webkit-transform: rotate(-1.5deg); 
  }
}

Sau đó chúng ta sẽ có kết quả như thế này:

Thật đơn giản phải không. Cám ơn các bạn đã theo dõi bài viết của mình