Tạo hiệu ứng animation xoay tròn trong CSS
Hôm nay mình sẽ hướng dẫn các bạn tạo hiệu ứng animation xoay 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="https://drive.google.com/uc?id=14_VgXAjKeCQ5MLsBsMA2hqJfr-DTObXd" />
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;
}