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

CSS Animations là một cách tuyệt vời để tạo hoạt ảnh trực quan, không giới hạn trong một chuyển động như CSS Transitions, nhưng rõ ràng hơn nhiề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

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:

Bất động sản Sự miêu tả
animation-name tên của hoạt ảnh, nó tham chiếu đến hoạt ảnh được tạo bằng cách sử dụng@keyframes
animation-duration hoạt ảnh sẽ kéo dài bao lâu, tính bằng giây
animation-timing-function chức năng định thời được sử dụng bởi hoạt ảnh (các giá trị chung:linear,ease). Mặc định:ease
animation-delay số giây tùy chọn để chờ trước khi bắt đầu hoạt ảnh
animation-iteration-count bao nhiêu lần hoạt ảnh nên được thực hiện. Mong đợi một con số, hoặcinfinite. Default: 1
animation-direction hướng của hoạt ảnh. Có thểnormal,reverse,alternatehoặc làalternate-reverse. Trong 2 lần cuối, nó luân phiên tiến về phía trước và sau đó lùi lại
animation-fill-mode xác định cách tạo kiểu cho phần tử khi hoạt ảnh kết thúc, sau khi kết thúc số lần lặp lại của nó.nonehoặc làbackwardsquay lại các kiểu khung hình chính đầu tiên.forwardsbothsử dụng kiểu được đặt trong khung hình chính cuối cùng
animation-play-state nếu được đặt thànhpaused, nó tạm dừng hoạt ảnh. Mặc định làrunning

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 đủ:

Bất động sản
lý lịch
màu nền
nền-vị trí
kích thước nền
biên giới
màu viền
chiều rộng biên giới
đường viền dưới cùng
đường viền-dưới cùng-màu
viền-dưới-trái-bán kính
viền-dưới-bên phải-bán kính
viền-dưới-độ rộng
biên giới bên trái
viền-trái-màu
viền-trái-chiều rộng
bán kính biên giới
biên giới bên phải
viền-phải-màu
viền-phải-rộng
khoảng cách giữa các đường viền
biên giới
màu viền trên cùng
bán kính đường viền trên cùng bên trái
bán kính đường viền trên cùng bên phải
chiều rộng đường viền
đáy
bóng hộp
dấu mũ màu
kẹp
màu sắc
số cột
cột-khoảng cách
quy tắc cột
cột-quy-tắc-màu
cột-quy tắc-chiều rộng
chiều rộng cột
cột
Nội dung
bộ lọc
uốn dẻo
cơ sở linh hoạt
uốn cong
uốn cong
nét chữ
cỡ chữ
phông chữ-kích thước-điều chỉnh
phông chữ kéo dài
font-weight
vùng lưới
lưới-tự động-cột
lưới-dòng chảy tự động
lưới-tự động-hàng
lưới-cột-kết thúc
lưới-cột-khoảng cách
lưới-cột-bắt đầu
cột lưới
khoảng cách lưới
lưới-hàng-kết thúc
lưới-hàng-khoảng cách
lưới-hàng-bắt đầu
hàng lưới
lưới-mẫu-khu vực
lưới-mẫu-cột
lưới-mẫu-hàng
lưới-mẫu
lưới
Chiều cao
trái
khoảng cách giữa các chữ cái
chiều cao giữa các dòng
lề
margin-bottom
lề trái
lề phải
margin-top
chiều cao tối đa
chiều rộng tối đa
chiều cao tối thiểu
chiều rộng tối thiểu
sự mờ đục
đặt hàng
đề cương
màu phác thảo
phác thảo-bù đắp
chiều rộng đường viền
đệm lót
padding-bottom
padding-left
padding-right
padding-top
Góc nhìn cá nhân
quan điểm-nguồn gốc
dấu ngoặc kép
đúng
kích thước tab
trang trí văn bản
văn bản-trang trí-màu sắc
thụt lề văn bản
bóng văn bản
hàng đầu
biến đổi.
căn chỉnh theo chiều dọc
hiển thị
chiều rộng
khoảng cách từ
chỉ số z

Tải xuống miễn phí của tôiSổ tay CSS


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