Cách sử dụng hoạt ảnh CSS để xoay hình ảnh liên tục

Trong hướng dẫn nhanh này, bạn sẽ học cách liên tục xoay hình ảnh bằng thuộc tính hoạt ảnh CSS.

Đầu tiên, chúng tôi cần một số đánh dấu HTML với một hình ảnh và một số thuộc tính:

<img
  src="/article/uploadfiles/202203/2022033109325250.png"
  class="rotate linear infinite"
  width="150"
  height="150"
/>

Hình ảnh của bạn sẽ hiển thị như thế này:

Như bạn có thể thấy phần tử hình ảnh của chúng tôi có ba lớp, rotate , linear và infinite . Trong biểu định kiểu CSS của chúng tôi, chúng tôi cần tạo một khối khai báo cho mỗi lớp. Những loại lớp này đôi khi được gọi là tiện ích hoặc người trợ giúp nhưng tôi thích thuật ngữ đơn mục đích hơn vì nó mang tính mô tả nhiều hơn.

Đầu tiên chúng ta hãy khai báo .rotate khối mã:

.rotate {
  animation: rotation 2s;
}

Sẽ không có gì xảy ra vì chúng ta cần xác định chức năng xoay của thuộc tính hoạt ảnh. Thêm quy tắc khung chính CSS này vào biểu định kiểu của bạn:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Bây giờ nếu bạn tải lại tab trình duyệt của mình, bạn sẽ thấy hình ảnh của mình xoay vòng một lần trong 2 giây (2s ). Nhưng chúng ta cần phải làm thêm hai điều nữa. Chúng tôi muốn hình ảnh xoay liên tục và chúng tôi muốn thay đổi thời gian chuyển đổi hoạt ảnh từ ease mặc định đến một đường cong tốc độ nhất quán, được gọi là linear .

Thêm .linear này khối khai báo cho biểu định kiểu CSS của bạn:

.linear {
  animation-timing-function: linear;
}

Tải lại tab trình duyệt của bạn và bạn sẽ thấy rằng hình ảnh của bạn hiện đang quay với tốc độ nhất quán từ đầu đến cuối.

Cuối cùng, hãy làm cho hình ảnh của chúng ta xoay vô hạn bằng cách khai báo .infinite của chúng ta khối mã của lớp:

.infinite {
  animation-iteration-count: infinite;
}

Và thì đấy, bây giờ bạn có một hình ảnh quay vô hạn / liên tục với đường cong tốc độ hoạt ảnh tuyến tính.

Kiểm tra mã hoàn chỉnh trên CodePen

Lưu ý:chúng ta có thể đã khai báo tất cả các thuộc tính hoạt ảnh của mình trong một dòng và một lớp duy nhất, như thế này:

.rotate-image {
  animation: rotation 2s linear infinite;
}

Phần trên giúp tiết kiệm rất nhiều mã, nhưng đối với việc học / giảng dạy, tôi thích chia nhỏ mọi thứ thành các phần nhỏ hơn, vì giúp dễ hiểu cách các thành phần riêng lẻ hoạt động cùng nhau.

Có nhiều đường cong hoạt ảnh bên cạnh ease mặc định và linear mà chúng tôi sử dụng ở đây. Bạn có thể trở nên thực sự ưa thích bằng cách sử dụng cubic-bezier đường cong hoạt ảnh, nhưng tôi sẽ lưu nó cho một hướng dẫn khác.