CSS Animation Techniques: Tạo nội dung web tương tác và hấp dẫn
Share
Giới thiệu
Cascading Style Sheet (CSS) là một ngôn ngữ tạo kiểu, được sử dụng để thiết kế, sắp xếp và làm đẹp cho nội dung web của chúng ta. CSS tạo kiểu cho các tài liệu HTML của chúng ta, tạo ra nội dung web hấp dẫn và trực quan.
Một tính năng ấn tượng của CSS là nó tạo ra nội dung web động và có tính tương tác. Chẳng hạn như CSS thực hiện như sau:
- Chỉ ra một liên kết đang active
- Hiển thị hiệu ứng động khi di chuột qua
- Làm sinh động nội dung web và nhiều hơn nữa.
Mục đích của bài viết này là về CSS animation. Chúng tôi mong muốn đơn giản hoá và truyền đạt khái niệm về CSS animation. Những gì chúng ta sẽ xem xét trong bài viết này bao gồm:
- Ý nghĩa của CSS Animation
- Các quy tắc của @keyframe.
- Các thuộc tính của CSS Animation
- Giá trị viết tắt của CSS animation
Điều kiện tiên quyết
Bài viết này tập trung vào Beginner và Mid-level developers, những người đang tìm kiếm để nâng cao kiến thức của họ về CSS animation. Mặc dù bạn cần phải có một sự hiểu biết cơ bản về HTML và CSS, nhưng trong bài viết này sẽ không bao gồm các kiến thức đó. Nếu bạn không có hiểu biết về HTML, CSS, tôi nghĩ rằng đầu tiên bạn cần tự học và làm quen với chúng trước khi đọc tiếp bài viết này.
CSS Animation là gì?
CSS Animation là một tính năng của CSS cho phép lập trình viên tạo ra nội dung web động và có tính tương tác mà không cần phải sử dụng thêm code chẳng hạn như JavaScript.
JavaScript là một ngôn ngữ lập trình được sử dụng để tạo ra nội dung web động và có tính tương tác. Tuy nhiên, CSS animation cũng tạo nội dung web động và có tính tương tác. Chẳng hạn CSS animation có thể thực hiện những việc sau:
- Tạo chuyển động cho các nội dung web, và các đối tượng
- Hiển thị ra các màu sắc và màu nền khác nhau cho nội dung web
- Thay đổi và cập nhật kiểu của nội dung web và còn nhiều hơn thế nữa.
Khi triển khai CSS animation, từ khoá @Keyframe sẽ đáp ứng mục đích của CSS animation
@keyframe là gì?
@Keyframe xác định đoạn code CSS animation. Giả sử bạn muốn thay đổi màu nền của một phần từ bằng CSS animation, @keyframe là nơi bạn sẽ xác định màu nền ban đầu và màu nền được cập nhật. Xem đoạn code ví dụ bên dưới:
@keyframe example{
from {background-color: red}
to {background-color: blue}
}
@keyframe chứa các thuộc tính xác định hoạt ảnh CSS. Từ ví dụ bên trên, @keyframe chứa 2 thuộc tính ‘from’ và ‘to’
Thuộc tính ‘From’chứa các thuộc tính và giá trị khởi tạo ban đầu của nội dung web của bạn để làm animation. Trong ví dụ trên thuộc tính ‘from’ chứa giá trị khởi tạo ban đầu ví dụ: background-color: red.
Thuộc tính ‘to’ chứa các thuộc tính và giá trị được cập nhật mới. Trong ví dụ trên, ‘to’ nhận giá trị mới của thuộc tính background-color là blue. Như kết quả, màu nền sẽ chuyển từ red sang blue.
Cùng xem thêm ví dụ.
@keyframe example{
0% {background-color: red}
100% {background-color: blue}
}