Muốn thiết kế nên một website đẹp, bạn cần nắm vững kiến thức về các thuộc tính thông dụng. Một thuộc tính mà chúng tôi muốn giới thiệu hôm nay chính là thuộc tính Keyframe CSS. Đây là một thuộc tính được dùng để điều khiển diễn biến hoạt động của các thành phần. Keyframe CSS được sử dụng đi kèm với thuộc tính animation.
Tại bài viết hôm nay chúng tôi sẽ giới thiệu đến bạn đọc những thông tin hữu ích về thuộc tính Keyframe CSS. Hướng dẫn cách sử dụng thuộc tính này cũng như các ví dụ thực tế. Mời bạn cùng theo dõi!
Thuộc tính Keyframe CSS là gì?
Keyframes là yếu tố cấu thành nên hiệu ứng trong CSS hay còn gọi là CSS animations. Nó định nghĩa hiệu ứng sẽ thay đổi và có kiểu dáng như thế nào tại mỗi thời điểm trong thời gian của hiệu ứng. Mỗi một Keyframes CSS sẽ có các thành phần sau đây:
Tên của hiệu ứng Keyframe
Là tên do bạn đặt cho hiệu ứng đó. Một ví dụ là bạn có thể đặt tên cho hiệu ứng là Pacman.
Các mốc thời gian của hiệu ứng Keyframe
Các mốc thời gian của hiệu ứng sẽ được hiển thị bằng giá trị phần trăm (%). 0% chính là thời điểm bắt đầu hiệu ứng, và 100% là thời điểm kết thúc hiệu ứng.
Bạn có thể thay đổi các giá trị này để điều chỉnh thời gian xuất hiện của các hiệu ứng trên website.
Thuộc tính CSS
Thuộc tính CSS là thuộc tính với giá trị mà bạn muốn thay đổi tương ứng với các mốc thời gian trên.
Như vậy một thuộc tính Keyframe CSS sẽ bao gồm cả 3 yếu tố trên, nếu thiếu một trong ba yếu tố sẽ không thể tạo nên một hiệu ứng hoàn chỉnh được phải không.
Giờ đây hãy cùng xem một ví dụ về cách thức hoạt động của thuộc tính này nhé.
Tặng miễn phí bộ Plugin 359$ để tối ưu SEO website
Bộ plugin TENTEN tặng miễn phí cho tất cả các khách hàng đăng ký mới hosting/ email server bao gồm:
- Rank Math Pro – tối ưu SEO
- WP rocket – Tăng tốc độ tải trang
- Imagify – Nén dung lượng ảnh
Sử dụng ngay hôm nay để website của bạn đứng đầu trong các kết quả tìm kiếm của Google!
NHẬN BỘ PLUGIN SEO MIỄN PHÍ TẠI ĐÂY
Một ví dụ về thuộc tính Keyframe CSS
Sau đây là một ví dụ về cách sử dụng thuộc tính Keyframe CSS:
@keyframes pacman {
0 % {
bottom: 0;
left: 340 px;
}
33 % {
bottom: 340 px;
left: 340 px;
}
66 % {
bottom: 340 px;
left: 40 px;
}
100 % {
bottom: 0;
left: 40 px;
}
}
Trên đây là ví dụ về keyframes pacman. Bao gồm có 2 điểm thay đổi trạng thái, là khi con pacman chuyển động. Trong cấu trúc trên, keyframes có tổng cộng 4 điểm.
Tùy vào thời điểm, số lần muốn thay đổi trạng thái mà các bạn sẽ tạo ra được số keyframes tương ứng với thời điểm mong muốn. Pacman sẽ thay đổi từ từ trạng thái keyframe trước tới trạng thái của keyframe sau.
Ở ví dụ trên bạn có thể thấy pacman đã di chuyển từ vị trí ban đầu là 0% cho đến 33%.
Keyframe CSS xác định quá trình thay đổi tại các thời điểm mong muốn của một hiệu ứng. Giữa các thời điểm mong muốn, đối tượng sẽ thay đổi trạng thái từ thời điểm trước đến thời điểm sau. Nếu hiệu ứng của bạn có 2 điểm dừng là 0% và 100% thì bạn có thể viết cấu trúc như sau:
@keyframes pacman {
from { //something here
}
to { // something else
}
}
Trình duyệt và hệ điều hành hỗ trợ keyframe css
Dưới đây là yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu để hỗ trợ cho thuộc tính keyframe css.
Bạn có thể xem thông tin chi tiết tại hình ảnh dưới đây:
Giới thiệu về animation
Sau khi bạn đã tạo được keyframes cho hành động, bạn cần thêm vào hành động đó các thuộc tính animation. Thuộc tính animation sẽ có hai nhiệm vụ chính:
-
Gán hành động được định nghĩa ở @keyframes cho đối tượng muốn thực hiện hành động.
-
Định nghĩa cách diễn ra hành động.
Để chạy được hiệu ứng một cách mượt mà, cần phải có ít nhất 2 thuộc tính animation như sau:
-
animation-name
: tên của hiệu ứng (được định nghĩa @keyframes)
-
animation-duration
: là tổng thời gian diễn ra hiệu ứng, đơn vị là giây (s) hoặc mili giây (ms)
Ví dụ như hình pacman ở trên sẽ có cấu trúc như sau:
img {
animation - name: pacman;
animation - duration: 3 s;
}
Bạn cũng có thể dùng short syntax theo cấu trúc:
img {
animation: pacman 3 s;
}
Các thuộc tính con của animation
Các thuộc tính con của animation gồm có:
animation-name: pacman;
Tên của hiệu ứng (định nghĩa @keyframes)
animation-duration: 3s;
Tổng thời gian diễn ra 1 lần hiệu ứng là
animation-timing-function: linear;
Cách để chạy hiệu ứng (giống như transition-timing-function): có thể xác định được đường cong tốc độ (hay còn gọi là đồ thị tốc độ chuyển động) hoặc tốc độ của hiệu ứng animation.
Các giá trị cho thuộc tính animation gồm có: ease, linear, ease-in, ease-out, ease-in-out, initial, inherit, và default value là ease: bắt đầu chuyển động chậm, rồi nhanh hơn, rồi sau đó lại chậm hơn.
Kết luận
Trên đây là bài viết giới thiệu đến bạn đọc về những thông tin cơ bản liên quan đến thuộc tính keyframe css. Chúng tôi đã phân tích đến bạn đọc 3 đối tượng bắt buộc khi sử dụng thuộc tính này. Chỉ có một số trình duyệt với yêu cầu cao mới có thể sử dụng thuộc tính trên nên bạn cần lưu ý về trình duyệt sử dụng nhé.
Bạn cũng cần lưu ý về cách sử dụng thêm các hiệu ứng animation. Bởi vì thuộc tính keyframe css không thể hoạt động nếu không kết hợp được với các animation.
Chúng tôi hy vọng những thông tin trên đây đã đem đến cho bạn đọc kiến thức hữu ích về thuộc tính keyframe css, các hiệu ứng animation. Hy vọng bạn đọc có thể sử dụng thành thạo thuộc tính và hiệu ứng này trong công việc của mình. Cảm ơn bạn đã quan tâm theo dõi.
Nếu có bất kỳ thắc mắc hay câu hỏi nào cần được giải đáp hãy liên hệ với chúng tôi để được hỗ trợ nhanh nhất.
Các tìm kiếm liên quan đến chủ đề “keyframe css”
Animation CSS
Keyframe là gì
Keyframe CSS là gì
animation css fade-in
Animate CSS
Transition keyframes
Keyframe CSS animation
Keyframe styled-components
Bài viết liên quan
Hide scrollbar CSS là gì? 3 Lưu ý cần nhớ khi ẩn thanh cuộn
Custom scrollbar css là gì? Hướng dẫn 2 cách sử dụng cơ bản
Box sizing trong css là gì? Hướng dẫn sử dụng 2 value đơn giản
Thuộc tính z index trong css là gì? Hướng dẫn 2 cách sử dụng dễ hiểu
Thuộc tính Float CSS là gì? Phân biệt Float và Clear trong CSS
