CSS Hoạt hình: Mang lại sự sống cho các trang web

Xin chào các nhà pháp sư web tương lai! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của CSS animations. Cuối cùng của bài hướng dẫn này, bạn sẽ có khả năng làm cho các phần tử nhảy qua lại trên trang web của bạn như một Fred Astaire số hóa. Vậy, hãy mang giày nhảy ảo của bạn và bắt đầu nào!

CSS Animation là gì?

CSS animation là như mang lại sự sống cho các phần tử tĩnh trên trang web của bạn. Hãy tưởng tượng nếu bạn có thể làm cho một nút nhấp nháy khi người dùng di chuột qua nó, hoặc làm cho logo quay khi trang tải. Đó chính là sức mạnh của CSS animation! Nó cho phép bạn thay đổi các giá trị thuộc tính CSS trong một khoảng thời gian nhất định, tạo ra sự di chuyển và sự quan tâm thị giác mà không cần đến JavaScript phức tạp hoặc Flash.

Quy tắc @keyframes

Trái tim của CSS animation là quy tắc @keyframes. Đây là nơi bạn xác định các giai đoạn của animation của bạn.

@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}

Trong ví dụ này, chúng ta đã tạo ra một animation名叫 "bounce". Ở 0% (bắt đầu), phần tử ở vị trí ban đầu. Ở 50% (nửa đường), nó di chuyển lên 20 pixel. Ở 100% (kết thúc), nó trở về vị trí ban đầu.

Thuộc tính Animation Delay

Đôi khi, bạn muốn animation của bạn chờ trước khi bắt đầu. Đó là lúc thuộc tính animation-delay phát huy tác dụng.

.delayed-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-delay: 2s;
}

CSS này sẽ áp dụng animation "bounce" cho bất kỳ phần tử nào có class "delayed-bounce". Animation sẽ kéo dài 1 giây, nhưng nó sẽ không bắt đầu cho đến khi trang tải xong 2 giây.

Đặt số lần lặp lại của Animation

Mặc định, animation chạy một lần và dừng lại. Nhưng nếu bạn muốn animation của bạn tiếp tục chạy, giống như chú thỏ Energizer? Đó là lúc thuộc tính animation-iteration-count được sử dụng.

.infinite-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

Bây giờ, phần tử nhảy của chúng ta sẽ tiếp tục nhảy mãi mãi, hoặc cho đến khi người dùng đóng trang (tùy điều kiện nào đến trước).

Thuộc tính Animation Direction

Đôi khi, bạn có thể muốn animation của bạn chạy ngược lại, hoặcalternate giữa forwards và backwards. Thuộc tính animation-direction cho phép bạn làm điều đó.

.alternate-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

Điều này sẽ làm cho phần tử của chúng ta liên tục nhảy lên và xuống, giống như một máy chuyển động vĩnh cửu (nếu chỉ chúng ta có thể sử dụng điều này để tạo ra năng lượng sạch!).

Thuộc tính Animation Timing Function

Thuộc tính animation-timing-function cho phép bạn kiểm soát tốc độ của animation. Nó giống như bạn là người chỉ huy của chính dàn nhạc số hóa của mình!

.ease-in-out-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}

Điều này sẽ làm cho animation nhảy của chúng ta bắt đầu chậm, tăng tốc ở giữa, và sau đó chậm lại ở cuối, mang lại cảm giác tự nhiên và bouncy hơn.

Đặt Fill Modes của Animation

Thuộc tính animation-fill-mode xác định phần tử nên trông như thế nào trước và sau animation.

.fill-mode-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
}

Với forwards, phần tử sẽ giữ lại các phong cách từ keyframe cuối cùng khi animation kết thúc, thay vì quay lại vị trí ban đầu.

Thuộc tính Shorthand của Animation

Nếu bạn cảm thấy bị choáng ngợp bởi tất cả các thuộc tính này, đừng lo lắng! CSS cung cấp một thuộc tính viết tắt để đặt tất cả các thuộc tính animation cùng một lúc:

.shorthand-bounce {
animation: bounce 1s ease-in-out 2s infinite alternate forwards;
}

Dòng này chỉ định tên animation, thời gian, hàm thời gian, độ trễ, số lần lặp lại, hướng và fill mode. Nó giống như cây kéo đa năng của CSS animation!

Danh sách các Thuộc tính CSS Animation

Dưới đây là bảng tóm tắt tất cả các thuộc tính CSS animation mà chúng ta đã xem qua:

Thuộc tính	Mô tả
animation-name	Xác định tên của animation @keyframes
animation-duration	Xác định thời gian animation hoàn thành một chu kỳ
animation-timing-function	Xác định đường cong tốc độ của animation
animation-delay	Xác định độ trễ cho việc bắt đầu animation
animation-iteration-count	Xác định số lần animation được phát
animation-direction	Xác định liệu animation có nên chạy ngược lại hay không trong các chu kỳ alternat
animation-fill-mode	Xác định các giá trị được áp dụng bởi animation ngoài thời gian thực thi
animation	Thuộc tính viết tắt để đặt tất cả các thuộc tính animation

Và thế là bạn đã có nó, các bạn! Bây giờ bạn đã được trang bị kiến thức để mang lại sự sống cho các trang web của mình với CSS animations. Nhớ rằng, với quyền lực lớn đi kèm với trách nhiệm lớn - sử dụng những animation này một cách khôn ngoan để cải thiện trải nghiệm người dùng, đừng làm họ bị phân tâm.

Khi bạn tập luyện, bạn sẽ thấy rằng CSS animations giống như nấu ăn - nó cần thời gian để có được công thức chính xác. Nhưng khi bạn làm được, bạn sẽ phục vụ những trải nghiệm web animate ngon lành mà sẽ làm người dùng của bạn quay lại lần nữa!

Bây giờ, hãy tiếp tục animate, các học viên Pixar số hóa của tôi. Web là canvas của bạn, và CSS là cọ của bạn. Chúc các bạn animate vui vẻ!

Credits: Image by storyset