Tạo hiệu ứng animation xoay tròn trong CSS

Bài hôm nay mình sẽ hướng dẫn các bạn tạo hiệu ứng animation quay tròn liên tục trong css

1. Tạo animation với tên là xoayvong, sử dụng transform kiểu rotate.
2. Sử dụng animation này vào đối tượng mong muốn.

HTML


<img alt="" src="images/threesome.jpg" />

CSS


/* Chrome, Safari, Opera */ 
@-webkit-keyframes xoayvong {
  from {
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
  }
  to {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
  }
}
/* Standard syntax */ 
@keyframes xoayvong {
  from {
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
  }
  to {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
  }
}

// call animation
img {
  animation: xoayvong 2s linear 0s infinite;
  -webkit-animation: xoayvong 2s linear 0s infinite;
  -moz-animation: xoayvong 2s linear 0s infinite;
  -o-animation: xoayvong 2s linear 0s infinite; 
}