Hoạt hình và chuyển tiếp là một phần quan trọng của thiết kế web. Thêm các hoạt ảnh tinh tế vào trang web của bạn sẽ làm cho nó hấp dẫn hơn. Các hình ảnh động đơn giản như biểu tượng hoạt hình, kiểu chữ động và logo hoạt hình có thể giúp nâng cao trải nghiệm người dùng. Tìm hiểu năm thủ thuật hoạt hình tuyệt vời có thể giúp bạn làm sống động trang web của mình.
1. Biến đổi một phần tử khi Hover
Một thực tiễn thiết kế phổ biến là có một yếu tố mở rộng quy mô khi tương tác. Ví dụ: bạn có thể muốn dịch các nút lên trên một chút khi ai đó di chuột lên đó. Bạn có thể đạt được điều này bằng cách sử dụng CSS biến đổi tài sản.
Giả sử bạn có một nút:
<button>
Click me
</button>
Bạn đã tạo kiểu cho phần thân của tài liệu cũng như nút:
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background-color: black;
}
button {
padding: 1em 2em;
background: blue;
border: 0;
color: white;
border-radius: 0.25rem;
cursor: pointer;
font-size: 2rem;
transition: transform 500ms;
}
button:hover,
button:focus {
transform: translateY(0.75rem) 500ms;
}
Với khối cuối cùng, bạn đang đặt trạng thái di chuột và tiêu điểm trên nút. Ở cả hai trạng thái, bạn dịch nút dọc theo trục Y 0,75rem. Nút sẽ trông như thế này:
Khi bạn di chuột vào nút, nó sẽ di chuyển theo hướng đi lên. Quá trình chuyển đổi mất nửa giây (500 mili giây) để hoàn thành. Đây là một mẫu mà bạn có thể triển khai không chỉ trên các nút của mình mà còn trên các thành phần khác (ví dụ: hình ảnh).
2. Khai báo nhiều khung hình chính bằng một lần khai báo
Một mẫu phổ biến khác trong hoạt ảnh CSS là lặp đi lặp lại cùng một giá trị nhiều lần. Đây có thể là một màu sắc, kích thước hoặc hướng cụ thể. Bạn có thể đạt được điều này bằng cách sử dụng hoạt ảnh khung hình chính CSS bằng cách khai báo nhiều khung hình chính bằng một lần khai báo.
Xem xét nút bạn đã tạo trong phần trước. Có thể bạn muốn lặp lại nhiều màu nền khi nhấp vào nút. Nhưng bạn cũng muốn chuyển qua cùng một màu ở các giai đoạn khác nhau của hoạt hình. Hãy xem làm thế nào để đạt được điều đó trong mã.
Đầu tiên, bạn chỉ muốn tạo hiệu ứng động cho nút khi được nhấp. Vì vậy, bạn sẽ tạo một script.js tệp, bên trong đó bạn truy cập vào nút và chuyển đổi một lớp trên nút khi nhấp vào:
const button = document.querySelector("button")
button.addEventListener("click", (e) => {
button.classList.toggle('party-time')
})
Chúng tôi đã sử dụng querySelector để truy cập nút từ trang web. Để tìm hiểu thêm về duyệt qua DOM, hãy đọc bài đăng của chúng tôi về cách duyệt qua DOM bằng JavaScript.
Các giờ tiệc lớp kích hoạt một hình ảnh động có tiêu đề buổi tiệc:
.party-time {
animation: party 2000ms infinite;
}
Đối với hoạt hình, bạn muốn bắt đầu với màu đỏ và chuyển sang màu vàng ở mức 25%. Sau đó, bạn sẽ trở lại màu đỏ ở mức 50% trước khi chuyển sang màu vàng ở mức 75%. Cuối cùng, ở mức 100%, bạn sẽ chọn màu xanh đậm:
@keyframes party {
0%, 50% {
background-color: red;
}
25%, 75% {
background-color: yellow;
}
100% {
background-color: hsl(200, 72%, 35%);
}
}
Cách tiếp cận này khá hữu ích để xen kẽ giữa các màu trên nền dựa trên màu sắc. Bởi vì bạn có thể lặp lại nhiều khung hình chính trong một biến, nên việc sử dụng cùng một thuộc tính ở các giai đoạn khác nhau của hoạt ảnh trở nên cực kỳ dễ dàng.
3. Sử dụng @property để tạo hiệu ứng cho các thuộc tính tùy chỉnh
Như bạn có thể đã biết, không phải tất cả các thuộc tính trong CSS đều có thể hoạt ảnh được. Tài liệu chính thức của Mozilla giữ một bản ghi cập nhật của tất cả các thuộc tính CSS có thể hoạt hình. Nếu bạn đang tìm cách tạo hoạt ảnh cho một thuộc tính không thể hoạt ảnh, thì giải pháp tốt nhất của bạn là sử dụng @tài sản chỉ thị.
Bắt đầu bằng cách thay đổi màu nền của nút thành một dải màu tuyến tính:
button {
// other CSS
background: linear-gradient(90deg, blue, green);
// other CSS
}
Đây là đầu ra:
Thông thường, bạn muốn tạo hiệu ứng chuyển màu trên nút. Mặc dù có những thủ thuật bạn có thể sử dụng để di chuyển dải màu xung quanh, nhưng thực tế bạn không thể tạo hiệu ứng động cho nó. Điều này là do lý lịch (cũng như hình nền) không phải là thuộc tính có thể hoạt ảnh được. Đây là đâu @tài sản vào đi.
Các @tài sản chỉ thị cho phép bạn đăng ký các thuộc tính tùy chỉnh. Khi bạn sử dụng @tài sảnbạn phải cung cấp cho nó ba giá trị, cụ thể là cú pháp, kế thừaVà giá trị ban đầu:
@property --color-1 {
syntax: "<color>";
inherits: true;
initial-value: red;
}
@property --color-2 {
syntax: "<color>";
inherits: true;
initial-value: blue;
}
Cái đầu tiên là thuộc tính bắt đầu trong khi cái thứ hai là thuộc tính đích. Bây giờ, thay vì chuyển đổi hình nền (mà bạn không thể chuyển đổi), bạn sẽ chuyển đổi từ –color-1 ĐẾN –color-2 (thuộc tính tùy chỉnh của bạn) trong một giây:
button {
transition: --color-1 1000ms, --color-2 1000ms;
}
Kỹ thuật này hữu ích vì bạn cũng có thể thêm các tùy chỉnh khác. Ví dụ: bạn thêm độ trễ để mang lại trải nghiệm mượt mà hơn. Các khả năng là vô tận.
4. Sử dụng độ trễ hoạt hình tiêu cực
Độ trễ hoạt ảnh rất quan trọng để tạo hoạt ảnh mượt mà. Hãy xem một ví dụ về điều đó trong hành động. Trong phần này, thêm một div phần tử có 15 dấu chấm trên đầu nút:
<div class="dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
Đây là một số kiểu dáng cơ bản để biến đổi từng đứa trẻ div vào một dấu chấm:
.dots {
display: flex;
gap: .5rem;
margin-bottom: 20px;
}
.dot {
width: 10px;
aspect-ratio: 1;
background-color: red;
border-radius: 50%;
}
Ở đây chúng tôi sử dụng Flexbox để đặt các dấu chấm theo một đường ngang. Để đi sâu vào Flexbox, bạn có thể xem hướng dẫn CSS Flexbox của chúng tôi.
Bên trong script.js, hãy thêm mã kích hoạt hoạt ảnh của các dấu chấm. Bạn đang chuyển đổi nhảy lớp trên các dấu chấm:
button.addEventListener("click", (e) => {
button.classList.toggle('party-time')
dots.forEach((dot) => {
dot.classList.toggle('dance')
})
})
Lớp khiêu vũ kích hoạt một hoạt hình có tiêu đề tăng lên:
.dot.dance {
animation: rise 2000ms infinite alternate;
}
Đối với hoạt ảnh, chỉ cần dịch các dấu chấm -100px dọc theo trục Y:
@keyframes rise {
100% {
transform: translateY(-100px)
}
}
Bây giờ là lúc để làm điều gì đó thú vị. Thay vì các dấu chấm tăng lên cùng một lúc, bạn muốn tạo hiệu ứng cho các dấu chấm chuyển động như một làn sóng. Để đạt được điều này, bạn phải thêm chậm trễ hoạt hình đến các dấu chấm và tăng từng dấu chấm thêm 100 mili giây:
.dot:nth-child(1) {
animation-delay: 100ms;
}
.dot:nth-child(2) {
animation-delay: 200ms;
}
.dot:nth-child(3) {
animation-delay: 300ms;
}
.dot:nth-child(4) {
animation-delay: 400ms;
}
Điều này tạo ra một hình ảnh động mượt mà trong đó các dấu chấm di chuyển lên và xuống dưới dạng lượn sóng. Hình ảnh sau đây ghi lại các dấu chấm ở giữa hoạt ảnh:
Hãy nhớ rằng điều này có thể gây rắc rối, điều này đưa chúng ta đến mẹo thứ năm.
5. Sử dụng chuyển động giảm tốc độ ưu tiên để Kích hoạt tùy chọn
Hãy luôn nhớ rằng nhiều người không thích hoạt hình dựa trên chuyển động. Trên thực tế, hầu hết người dùng đều có tùy chọn trong trình duyệt có thể tắt chuyển động. Chuyển động có thể đánh lạc hướng các giác quan, và trong trường hợp nghiêm trọng, dẫn đến buồn nôn.
May mắn thay, bạn có thể dễ dàng giải quyết vấn đề này bằng cách bọc hoạt ảnh của mình bên trong một không ưu tiên truy vấn phương tiện như vậy:
@media(prefers-reduced-motion: no-preference) {
.dot.dance {
animation: rise 2000ms infinite alternate;
}
}
Bây giờ nếu bạn kích hoạt thích-giảm-chuyển động trong trình duyệt của bạn, thì hình ảnh động sẽ không chạy.
Tìm hiểu thêm Mẹo và Thủ thuật CSS
CSS có rất nhiều thủ thuật tuyệt vời vượt ra ngoài hoạt ảnh và chuyển tiếp. Ví dụ: có các mẹo và thủ thuật để làm cho toàn bộ bố cục của bạn đẹp mắt và phản hồi nhanh. Các phương pháp này có thể giúp bạn làm cho trang web của mình hấp dẫn hơn, dễ truy cập hơn và dễ duyệt hơn. Nếu bạn muốn trở thành một phần trăm nhà phát triển CSS hàng đầu, thì việc có sẵn một vài thủ thuật sẽ giúp ích rất nhiều cho bạn.
