Cách tạo hoạt ảnh khung chính CSS

Cách tạo hoạt ảnh khung chính CSS

CSS cung cấp cho các nhà phát triển khả năng làm cho các trang web của họ trở nên sống động bằng cách sử dụng hoạt ảnh khung hình chính.





Hoạt ảnh CSS đạt được bằng cách thay đổi trạng thái ban đầu của một phần tử HTML thông qua các thuộc tính khác nhau của nó. Một số thuộc tính CSS chung có thể được làm động bao gồm:



chrome sử dụng nhiều bộ nhớ
  • Chiều rộng
  • Chiều cao
  • Chức vụ
  • Màu sắc
  • Độ mờ

Các thuộc tính CSS chung này được thao tác bởi các phần tử CSS cụ thể để tạo ra kết quả mong muốn. Nếu bạn đã từng bắt gặp một phần tử hoạt hình trên một trang web, rất có thể phần tử đó đã được làm động bằng cách sử dụng hoạt ảnh khung hình chính.





Phần tử khung hình chính là gì?

Các phần tử khung hình chính có thể được sử dụng trên một hoặc nhiều phần tử HTML mà nó có quyền truy cập. Nó xác định một điểm cụ thể trong trạng thái của một phần tử và chỉ định diện mạo mà phần tử này phải có tại thời điểm này.

Điều này nghe có vẻ nhiều thứ để hiểu, nhưng nó thực sự khá đơn giản. Các phần tử khung hình chính có cấu trúc khá đơn giản có thể dễ dàng hiểu và điều chỉnh để phù hợp với bất kỳ yêu cầu hoạt hình nào.



Ví dụ về cấu trúc khung hình chính


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

Giả sử bạn muốn tạo hoạt ảnh cho một nút hình chữ nhật màu xanh lá cây bằng cách chuyển nó thành một nút tròn màu xanh lam.

Trong các tham số của từ ở trên, bạn sẽ cần đặt tất cả các kiểu dáng cần thiết để phần tử trông giống như một nút hình chữ nhật màu xanh lá cây, sau đó trong đến , bạn sẽ đặt tất cả các yêu cầu về kiểu dáng để biến nút này thành nút tròn màu xanh lam.



Nếu bạn đang nghĩ, điều đó có vẻ không quá giống hoạt hình. Chà, đó là bởi vì một thành phần quan trọng của toàn bộ quá trình này vẫn chưa được giới thiệu --- thành phần này là thuộc tính hoạt ảnh.

Thuộc tính Hoạt hình

Các tài sản hoạt hình có một tập hợp các thuộc tính con khác nhau; chúng được sử dụng kết hợp với cấu trúc khung hình chính ở trên để tạo hoạt ảnh cho phần tử HTML mong muốn.



Tuy nhiên, bạn chỉ cần biết năm trong số các thuộc tính phụ này và các giá trị được liên kết với chúng, để đạt được hoạt ảnh trong các dự án của bạn. Các thuộc tính này được gọi là:

  • Tên-hoạt hình
  • Thời lượng hoạt ảnh
  • Hoạt ảnh-thời gian-chức năng
  • Hoạt ảnh-độ trễ
  • Số lần lặp lại hoạt ảnh

Sử dụng hoạt ảnh trên trang web

Sử dụng tình huống trên, mục tiêu là tạo một nút hoạt hình.

Ví dụ về hoạt ảnh nút







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!


Phần hoạt ảnh của đoạn mã trên chứa năm thuộc tính phụ đã được đề cập trước đó. Mỗi thuộc tính có một chức năng rất riêng biệt và chúng hoạt động cùng nhau để tạo hoạt ảnh cho bất kỳ phần tử HTML nào mà chúng được tạo ra để nhắm mục tiêu.

Liên quan: Cách nhắm mục tiêu một phần của trang web bằng bộ chọn CSS

Thuộc tính Animation-name

Thuộc tính này là thuộc tính quan trọng nhất trong danh sách. Không có thuộc tính tên hoạt hình , bạn sẽ không có số nhận dạng để chuyển sang phần tử khung hình chính , làm cho tất cả mã trong các tham số của nó trở nên vô dụng.

Nếu bạn quên bao gồm một hoặc hai thuộc tính phụ khác thì bạn vẫn có thể có một hoạt ảnh khá ổn. Tuy nhiên, nếu bạn quên thuộc tính tên hoạt hình bạn sẽ không có hoạt ảnh.

Thuộc tính thời lượng hoạt ảnh

Thuộc tính này được sử dụng để xác định lượng thời gian mà một phần tử hoạt ảnh cần có khi chuyển đổi từ trạng thái này sang trạng thái tiếp theo.

Trong ví dụ trên, thuộc tính thời lượng hoạt ảnh được đặt thành 5 giây (5s), do đó, nút hình chữ nhật màu xanh lá cây sẽ có tổng cộng 5 giây trước khi hoàn toàn trở thành nút tròn màu xanh lam.

Thuộc tính Animation-delay

Thuộc tính này quan trọng bởi vì một lý do; một số trang web có thể mất vài giây để tải hoàn toàn (do một số yếu tố khác nhau). Nên thuộc tính animation-delay ngăn hoạt ảnh bắt đầu ngay lập tức chỉ trong trường hợp trang web mất một khoảng thời gian để tải.

Trong ví dụ trên, thuộc tính animation-delay được đặt thành 4 giây, có nghĩa là hoạt ảnh sẽ không bắt đầu cho đến 4 giây sau khi trang web được truy cập (cho trang web đủ thời gian để tải trước khi hoạt ảnh bắt đầu).

Thuộc tính Animation-iteration-count

Thuộc tính này cho biết số lần phần tử hoạt hình sẽ chuyển từ trạng thái này sang trạng thái tiếp theo. Các thuộc tính animation-iteration-count nhận các giá trị là từ và số. Giá trị số có thể là bất kỳ giá trị nào từ 1 trở lên, trong khi giá trị từ thường là vô hạn .

Trong ví dụ trên, giá trị hoạt-động-lặp-đếm được đặt thành vô hạn , có nghĩa là miễn là trang web lên, thuộc tính nút sẽ hoạt động liên tục từ trạng thái này sang trạng thái tiếp theo.

Thuộc tính Animation-timeing-function

Thuộc tính này chỉ định chuyển động của phần tử hoạt hình khi nó chuyển từ trạng thái này sang trạng thái tiếp theo. Các thuộc tính hoạt ảnh-thời gian-chức năng thường được gán một trong ba giá trị dễ dàng.

  • Dễ dàng trong
  • Dễ dàng
  • Dễ dàng vào-ra

Các giá trị đầu vào dễ dàng được sử dụng ở trên; điều này từ từ chuyển hoạt ảnh từ trạng thái này sang trạng thái khác. Nếu mục tiêu là tạo ra một quá trình chuyển đổi chậm khi nút đang chuyển đổi từ hình chữ nhật màu xanh lá cây sang hình tròn màu xanh lam, bạn sẽ sử dụng giá trị dễ dàng . Nếu bạn chỉ muốn chuyển đổi chậm theo hướng ngược lại, bạn sẽ sử dụng giá trị dễ dàng nhận ra .

Giảm mã của chúng tôi

Trong hầu hết các trường hợp, giảm thời lượng của một chương trình được coi là một cách tiếp cận thực tế. Điều này chủ yếu là do ít dòng mã hơn làm giảm khả năng xảy ra lỗi không được chú ý trong chương trình của bạn.

Đoạn mã trên có thể được giảm bớt bốn dòng. Điều này có thể đạt được chỉ bằng cách sử dụng thuộc tính animation mà không cần xác định rõ ràng từng thuộc tính con của nó.

Giảm mã cho ví dụ hoạt ảnh nút







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}