Khi bạn đang thiết kế một trang web, bạn có thể muốn thêm các chuyển đổi vào một phần tử. Quá trình chuyển đổi được kích hoạt khi một điều kiện nhất định được đáp ứng. Ví dụ:bạn có thể muốn màu nền của nút thay đổi khi người dùng di chuột qua nút.
Bạn có thể sử dụng thuộc tính chuyển tiếp CSS và các thuộc tính con của nó để tạo hiệu ứng hoạt ảnh khi các thuộc tính của phần tử HTML thay đổi.
Hướng dẫn này sẽ thảo luận, với một vài ví dụ, khái niệm cơ bản về chuyển tiếp CSS và cách sử dụng thuộc tính chuyển đổi để tạo hoạt ảnh CSS. Đến cuối hướng dẫn này, bạn sẽ là một chuyên gia làm việc với các chuyển đổi CSS và thuộc tính chuyển đổi.
Chuyển đổi CSS
Theo mặc định, khi giá trị của thuộc tính CSS thay đổi, trang web sẽ áp dụng thay đổi ngay lập tức.
Ví dụ:nếu bạn tạo một thay đổi kiểu được kích hoạt khi con trỏ di chuột qua một nút, kiểu mới sẽ được áp dụng ngay khi người dùng di chuột qua nút đó. Ngay sau khi con trỏ của người dùng di chuyển khỏi nút, nút sẽ trở lại kiểu mặc định ngay lập tức.
Tính năng chuyển tiếp CSS được sử dụng để tạo ra sự chuyển đổi mượt mà giữa hai kiểu. Khi bạn sử dụng thuộc tính chuyển đổi, trang web sẽ tạo hiệu ứng thay đổi giữa hai kiểu. Tính năng này cho phép bạn tạo các thay đổi phong cách thẩm mỹ hơn.
Có hai thành phần của quá trình chuyển đổi CSS. Đó là:
- Thuộc tính CSS mới mà bạn muốn áp dụng cho một phần tử.
- Khoảng thời gian của quá trình chuyển đổi.
Theo mặc định, thời lượng của quá trình chuyển đổi được đặt thành 0 giây. Điều này có nghĩa là nếu bạn không xác định thời lượng, quá trình chuyển đổi bạn chỉ định sẽ không có hiệu lực — nói cách khác, sự thay đổi kiểu sẽ xảy ra ngay lập tức.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Ví dụ về chuyển đổi CSS
Giả sử chúng ta đang thiết kế một nút cho một trang web và chúng ta muốn kiểu của nút thay đổi khi người dùng di chuột qua nó bằng con trỏ của họ. Khi người dùng không di chuột qua nút bằng con trỏ, nút phải có đường viền màu xanh lam. Sau đó, khi người dùng di chuột qua nút bằng con trỏ, màu nền của nút sẽ thay đổi từ màu mặc định (trắng) thành xanh lam.
Ở cả hai trạng thái, nút phải cao 100px x rộng 100px và văn bản trong nút của chúng ta phải được căn giữa. Quá trình chuyển đổi giữa hai trạng thái sẽ mất hai giây.
Đây là mã chúng tôi sẽ sử dụng để tạo nút này:
index.html
<div><p>This is a button.</p></div>
styles.css
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s;
}
div:hover {
background-color: #33CCFF;
}
Mã của chúng tôi trả về:
[Code result here]
Trong mã của chúng tôi, chúng tôi đã tuyên bố rằng nút của chúng tôi phải rộng 100px x cao 100px và nội dung của nút phải có căn giữa. Chúng tôi cũng chỉ định một đường viền màu xanh lam đặc rộng 3 px cho nút của chúng tôi.
Khi bạn di chuột qua nút bằng con trỏ, bạn có thể thấy rằng màu nền của nó thay đổi thành màu xanh lam. Khi bạn di chuyển con trỏ ra xa, màu nền của nút sẽ chuyển trở lại màu trắng.
Trong ví dụ này, chúng tôi đã chỉ định khoảng thời gian chuyển tiếp hai giây cho thuộc tính màu nền. Điều này có nghĩa là khi người dùng di chuột qua nút bằng con trỏ, màu nền của nút sẽ mất hai giây để thay đổi hoàn toàn từ màu trắng sang màu xanh lam — nói cách khác, sự thay đổi này không diễn ra ngay lập tức.
Tương tự như vậy, khi người dùng di chuyển con trỏ khỏi nút, màu nền sẽ thay đổi từ xanh lam sang trắng trong khoảng thời gian hai giây — một lần nữa, không phải ngay lập tức. Do đó, chúng tôi có thể đạt được quá trình chuyển đổi mượt mà, kéo dài hai giây đến và từ màu nền mới dựa trên vị trí của con trỏ trên trang.
Sau đó, chúng tôi chỉ định kiểu mà chúng tôi muốn kích hoạt khi người dùng di chuột qua nút bằng con trỏ. Chúng tôi đã hoàn thành việc này bằng cách sử dụng:bộ chọn di chuột. Chương trình áp dụng (các) kiểu được xác định trong bộ chọn:hover cho một phần tử khi người dùng di chuột qua phần tử đó bằng con trỏ của họ.
Nếu bạn muốn tìm hiểu thêm về CSS:hover selector, hãy đọc hướng dẫn của chúng tôi về CSS:hover selector.
Đường cong tốc độ chuyển tiếp
Thuộc tính chức năng thời gian chuyển tiếp cho phép bạn chỉ định đường cong tốc độ của hiệu ứng chuyển tiếp. Dưới đây là một số giá trị được thuộc tính này chấp nhận:
Giá trị (và Mô tả tương ứng)
của Thuộc tính chức năng thời gian chuyển tiếp
| Value | Mô tả Đường cong tốc độ chuyển tiếp |
| dễ dàng | bắt đầu chậm, sau đó tăng tốc nhanh, sau đó kết thúc chậm (giá trị mặc định) |
| dễ dàng | bắt đầu chậm, sau đó tăng tốc nhanh |
| dễ dàng hơn | bắt đầu nhanh, sau đó kết thúc chậm |
| tuyến tính | tốc độ như nhau từ đầu đến cuối |
| khối-bezier (n, n, n, n) | chuyển tiếp khối-bezier |
Như bạn có thể thấy, giá trị đầu tiên trong bảng này— “dễ dàng” —là giá trị mặc định. Điều này có nghĩa là nếu bạn không chỉ định giá trị cho thuộc tính chức năng thời gian chuyển đổi hoặc nếu bạn hoàn toàn không chỉ định thuộc tính khi tạo kiểu chuyển đổi, trang web sẽ mặc định sử dụng giá trị này.
Hãy lấy mã từ ví dụ cuối cùng của chúng tôi để minh họa cách hoạt động của thuộc tính chức năng thời gian chuyển đổi. Trong ví dụ cuối cùng của chúng tôi, chúng tôi đã chỉ định một đường cong tốc độ "dễ dàng". Điều này có nghĩa là kiểu dáng của nút của chúng ta sẽ thay đổi từ kiểu này sang kiểu khác với khởi đầu chậm, tăng tốc nhanh và kết thúc chậm.
Tuy nhiên, giả sử chúng ta muốn nút của mình chuyển sang màu nền mới bằng cách sử dụng chuyển tiếp tuyến tính. Chúng tôi có thể làm như vậy bằng cách chỉ định giá trị “dễ dàng tiếp cận”. Đây là mã cho việc này:
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s linear 0.5s;
}
div:hover {
background-color: #33CCFF;
}
Mã của chúng tôi trả về:
[Result of code]
Các phong cách của chúng tôi hầu hết giống với những phong cách chúng tôi đã sử dụng trong ví dụ trước. Sự khác biệt duy nhất là thay vì chỉ định một ease chuyển tiếp, chúng tôi chỉ định một linear sự chuyển tiếp. Điều này có nghĩa là tốc độ của quá trình chuyển đổi sẽ vẫn nhất quán khi nó được kích hoạt.
Độ trễ chuyển đổi
Thuộc tính độ trễ chuyển tiếp cho phép bạn chỉ định độ trễ cho hiệu ứng chuyển tiếp. Giá trị được gán cho thuộc tính độ trễ chuyển tiếp phải tính bằng giây.
Giả sử chúng ta muốn nút của mình thay đổi thành màu nền mới sau một giây trễ. Chúng tôi có thể thực hiện nhiệm vụ này bằng cách sử dụng mã sau:
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color ease-in 0.5s;
transition-delay: 1s;
}
div:hover {
background-color: #33CCFF;
}
Mã của chúng tôi trả về:
[Code result here]
Trong mã của chúng tôi, chúng tôi chỉ định độ trễ của quá trình chuyển đổi là một giây. Vì vậy, quá trình chuyển đổi không bắt đầu cho đến một giây sau khi người dùng bắt đầu di con trỏ qua nút.
Áp dụng Nhiều Chuyển đổi
Khi làm việc với các hiệu ứng chuyển tiếp, bạn có thể quyết định rằng bạn muốn có nhiều hiệu ứng chuyển tiếp diễn ra.
Bạn có thể làm điều này bằng cách chỉ định nhiều chuyển đổi và phân tách từng chuyển đổi bằng dấu phẩy. Mỗi quá trình chuyển đổi có thể có thời lượng, đường cong tốc độ và bất kỳ thuộc tính nào khác mà quá trình chuyển đổi thông thường sẽ sử dụng.
Ví dụ:hãy lấy ví dụ về nút của chúng ta ở phần trước. Giả sử chúng ta không chỉ muốn thay đổi màu nền của nút thành màu xanh lam mà còn muốn thay đổi màu đường viền của nút thành màu hồng. Cả hai điều này sẽ xảy ra khi người dùng di chuột qua phần tử bằng con trỏ. Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s, border 2s;
}
div:hover {
background-color: #33CCFF;
border: solid 3px lightpink
}
Mã của chúng tôi trả về:
[Code result here]
Khi bạn di chuột qua nút, màu nền của nó sẽ chuyển thành màu xanh lam và màu đường viền của nó chuyển thành màu hồng nhạt. Quá trình chuyển đổi này mất hai giây để hoàn thành.
Thứ tự xuất hiện của mỗi chuyển đổi trong danh sách các chuyển đổi không ảnh hưởng đến cách chuyển đổi xuất hiện.
Chuyển đổi CSS Tốc ký so với Tốc ký
Trong các ví dụ trên, chúng tôi đã sử dụng thuộc tính chuyển đổi để tạo kiểu cho quá trình chuyển đổi của chúng tôi. Thuộc tính chuyển đổi là viết tắt của bốn thuộc tính con riêng lẻ được sử dụng để xác định quá trình chuyển đổi trong CSS. Bốn đặc tính con này là:
- thuộc tính chuyển tiếp :đặt các thuộc tính mà hiệu ứng chuyển tiếp sẽ được áp dụng.
- thời lượng chuyển tiếp :cho biết quá trình chuyển đổi sẽ kéo dài trong bao lâu.
- chức năng-thời gian chuyển tiếp :xác định tốc độ của quá trình chuyển đổi.
- độ trễ chuyển tiếp :trì hoãn việc bắt đầu quá trình chuyển đổi.
Hãy sử dụng ví dụ ở trên của chúng tôi để chứng minh cách hoạt động của các thuộc tính này. Giả sử chúng ta muốn tạo một nút 100px x 100px với đường viền màu xanh lam, màu nền (trắng) mặc định và văn bản được căn giữa. Màu nền của nút của chúng tôi sẽ chuyển sang màu xanh lam khi người dùng di chuột qua nó bằng con trỏ của họ. Quá trình chuyển đổi này sẽ mất 2 giây và sẽ bắt đầu 0,5 giây sau khi người dùng bắt đầu di chuột qua nút bằng con trỏ của họ.
Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition-property: background-color;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: 0.5s;
}
div:hover {
background-color: #33CCFF;
}
Mã của chúng tôi trả về:
[Code result]
Như bạn có thể thấy, chúng tôi đã tạo một nút chuyển sang và chuyển từ màu nền xanh lam. Những chuyển đổi này xảy ra khi người dùng di con trỏ của họ qua và ra khỏi nút tương ứng.
Trong mã của chúng tôi, chúng tôi đã chỉ định bốn đặc tính con của quá trình chuyển đổi (thuộc tính chuyển tiếp, thời lượng chuyển đổi, chức năng-thời gian chuyển đổi và độ trễ chuyển tiếp) cho quá trình chuyển đổi của chúng tôi. Chúng tôi cũng sử dụng các kiểu từ ví dụ trước đó của chúng tôi để đặt chiều cao, chiều rộng, căn chỉnh văn bản và màu đường viền của nút của chúng tôi.
Ngoài ra, chúng ta có thể sử dụng tốc ký chuyển tiếp. Sử dụng tốc ký cho phép chúng tôi chỉ định quá trình chuyển đổi CSS của mình trên một dòng mã thay vì bốn dòng mà chúng tôi đã sử dụng trước đó. Cú pháp cho chuyển đổi tốc ký như sau:
chuyển tiếp:chuyển tiếp-thuộc tính-thời gian chuyển đổi-thời gian-chuyển đổi chức năng-độ trễ;
Thứ tự của các giá trị được chỉ định ở trên là thứ tự bạn cần sử dụng khi tạo chuyển đổi.
Hãy sử dụng một ví dụ để minh họa cách hoạt động của tốc ký chuyển đổi. Đây là mã chúng tôi sẽ sử dụng để tạo nút của chúng tôi từ trước đó bằng cách sử dụng tốc ký chuyển đổi:
<div><p>This is a button.</p></div>
div {
width: 100px;
height: 100px;
text-align: center;
border: solid 3px #33CCFF;
transition: background-color 2s ease 0.5s;
}
div:hover {
background-color: #33CCFF;
}
Mã của chúng tôi trả về:
[Code result here]
Như bạn có thể thấy, chúng tôi đã áp dụng các phong cách tương tự ở đây như chúng tôi đã làm trong ví dụ trước. Sự khác biệt duy nhất là thay vì chỉ định các kiểu cho quá trình chuyển đổi của chúng tôi bằng cách liệt kê từng thuộc tính con riêng lẻ trên dòng riêng của nó, chúng tôi đã sử dụng tốc độ chuyển đổi thay thế.
Kết luận
Thuộc tính chuyển tiếp CSS được sử dụng để xác định kiểu chuyển đổi sẽ xảy ra giữa các kiểu. Thuộc tính chuyển tiếp có bốn thuộc tính tốc ký:thuộc tính chuyển tiếp, độ trễ chuyển tiếp, chức năng chuyển tiếp-thời gian và thời lượng chuyển tiếp. Bạn có thể sử dụng các đặc tính con này để đặt các phần tử của kiểu chuyển tiếp riêng lẻ.
Với các ví dụ, hướng dẫn này đã thảo luận về cách tạo một quá trình chuyển đổi trong CSS bằng cách sử dụng thuộc tính chuyển đổi và bốn thuộc tính con của nó. Bây giờ, bạn đã sẵn sàng để bắt đầu tạo các chuyển đổi CSS như một nhà phát triển web chuyên nghiệp!