Hướng dẫn tạo ảnh động CSS

• Giới thiệu
• Ví dụ về hoạt ảnh CSS
• Thuộc tính hoạt ảnh CSS
• Sự kiện JavaScript dành cho Hoạt ảnh CSS
• Thuộc tính nào bạn có thể tạo hoạt ảnh bằng CSS Animations

Giới thiệu

Hoạt ảnh được áp dụng cho một phần tử bằng cách sử dụnganimationbất động sản.

.container {
  animation: spin 10s linear infinite;
}

spinlà tên của hoạt ảnh mà chúng ta cần xác định riêng. Chúng tôi cũng yêu cầu CSS tạo hoạt ảnh kéo dài 10 giây, thực hiện nó theo cách tuyến tính (không tăng tốc hoặc bất kỳ sự khác biệt nào về tốc độ của nó) và lặp lại nó vô hạn.

Bạn phảixác định cách hoạt ảnh của bạn hoạt độngsử dụngkhung hình chính. Ví dụ về hoạt ảnh xoay một mục:

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

Bên trong@keyframesđịnh nghĩa, bạn có thể có bao nhiêu điểm tham chiếu trung gian như bạn muốn.

Trong trường hợp này, chúng tôi hướng dẫn CSS tạo thuộc tính biến đổi để xoay trục Z từ 0 đến 360 điểm, hoàn thành toàn bộ vòng lặp.

Bạn có thể sử dụng bất kỳ biến đổi CSS nào tại đây.

Lưu ý rằng điều này không quyết định bất kỳ điều gì về khoảng thời gian mà hoạt ảnh sẽ thực hiện. Điều này được xác định khi bạn sử dụng nó quaanimation.

Ví dụ về hoạt ảnh CSS

Tôi muốn vẽ bốn vòng tròn, tất cả đều có điểm xuất phát chung, cách xa nhau 90 độ.

<div class="container">
  <div class="circle one"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
  <div class="circle four"></div>
</div>

body {
  display: grid;
  place-items: center;
  height: 100vh;
}
.circle {
border-radius: 50%;
left: calc(50% - 6.25em);
top: calc(50% - 12.5em);
transform-origin: 50% 12.5em;
width: 12.5em;
height: 12.5em;
position: absolute;
box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5);
}
.one,
.three {
background: rgba(142, 92, 205, 0.75);
}
.two,
.four {
background: rgba(236, 252, 100, 0.75);
}
.one {
transform: rotateZ(0);
}
.two {
transform: rotateZ(90deg);
}
.three {
transform: rotateZ(180deg);
}
.four {
transform: rotateZ(-90deg);
}

Bạn có thể thấy chúng trong Glitch này:https://glitch.com/edit/#!/flavio-css-circles

Hãy làm cho cấu trúc này (tất cả các vòng tròn cùng nhau) xoay. Để làm điều này, chúng tôi áp dụng hoạt ảnh trên vùng chứa và chúng tôi xác định hoạt ảnh đó là xoay 360 độ:

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.container {
animation: spin 10s linear infinite;
}

Xem nó trênhttps://glitch.com/edit/#!/flavio-css-animations-tutorial

Bạn có thể thêm nhiều khung hình chính để có hình ảnh động vui nhộn hơn:

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  25% {
    transform: rotateZ(30deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  75% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

Xem ví dụ trênhttps://glitch.com/edit/#!/flavio-css-animations-four-steps

Thuộc tính hoạt ảnh CSS

Hoạt ảnh CSS cung cấp rất nhiều thông số khác nhau mà bạn có thể tinh chỉnh:

Cácanimationthuộc tính là cách viết tắt của tất cả các thuộc tính này, theo thứ tự sau:

.container {
  animation: name duration timing-function delay iteration-count direction
    fill-mode play-state;
}

Đây là ví dụ chúng tôi đã sử dụng ở trên:

.container {
  animation: spin 10s linear infinite;
}

Sự kiện JavaScript dành cho Hoạt ảnh CSS

Sử dụng JavaScript, bạn có thể nghe các sự kiện sau:

• animationstart
• animationend
• animationiteration

Cẩn thận vớianimationstart, bởi vì nếu hoạt ảnh bắt đầu khi tải trang, mã JavaScript của bạn luôn được thực thi sau khi CSS đã được xử lý, vì vậy hoạt ảnh đã được bắt đầu và bạn không thể chặn sự kiện.

const container = document.querySelector('.container')
container.addEventListener(
  'animationstart',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationend',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationiteration',
  (e) => {
    //do something
  },
  false
)

Thuộc tính nào bạn có thể tạo hoạt ảnh bằng CSS Animations

Rất nhiều! Chúng giống nhau mà bạn có thể tạo hoạt ảnh bằng cách sử dụng Chuyển tiếp CSS.

Đây là danh sách đầy đủ:

Các hướng dẫn css khác:

• Hướng dẫn Flexbox
• Hướng dẫn về CSS Grid
• Biến CSS (Thuộc tính tùy chỉnh)
• Giới thiệu về PostCSS
• Thuộc tính lề CSS
• Cách căn giữa một phần tử bằng CSS
• Phông chữ Hệ thống CSS
• Cách in HTML của bạn với phong cách
• Hướng dẫn giới thiệu về Chuyển đổi CSS
• Hướng dẫn tạo ảnh động CSS
• Giới thiệu về CSS
• Hướng dẫn CSS
• Cách thiết lập Tailwind với PurgeCSS và PostCSS
• Tờ Tailwind Cheat
• Cách xoay liên tục hình ảnh bằng CSS
• Tạo bảng phản hồi bằng CSS
• Cách gỡ lỗi CSS bằng cách chia đôi
• Bộ chọn CSS
• Xếp tầng CSS
• Đặc tính CSS
• Bộ chọn thuộc tính CSS
• Màu sắc CSS
• Đơn vị CSS
• Url CSS ()
• Kiểu chữ CSS
• Mô hình hộp CSS
• Thuộc tính vị trí CSS
• Truy vấn phương tiện CSS và thiết kế đáp ứng
• Truy vấn tính năng CSS
• Chuyển đổi CSS
• Cách tạo kiểu danh sách bằng CSS
• Tiền tố nhà cung cấp CSS
• Kế thừa CSS
• Lớp giả CSS
• Phần tử giả CSS
• Tạo kiểu bảng HTML bằng CSS
• Thuộc tính Hiển thị CSS
• Hàm calc () CSS
• Đường viền CSS
• Nhập tệp CSS bằng @import
• Xử lý lỗi CSS
• Bộ lọc CSS
• Kích thước hộp CSS
• Nền CSS
• Nhận xét CSS
• Phông chữ CSS
• CSS Padding
• Thuộc tính float CSS và thanh toán bù trừ
• Chuẩn hóa CSS
• Thuộc tính CSS z-index
• Cách tắt lựa chọn văn bản bằng CSS
• Cách đặt một mục ở dưới cùng của vùng chứa bằng CSS
• Cách đảo màu bằng CSS
• Các thẻ pre đáp ứng trong CSS
• Nhúng video YouTube thích ứng
• Giá trị Điểm ngắt CSS tốt cho Thiết kế đáp ứng là gì?
• Cách căn giữa trong flexbox