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

Cập nhật: Lượt xem: 939 [ 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.

Tạo hiệu ứng animation xoay tròn 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; 
}

Demo