Khi thiết kế trang web, bạn muốn thêm chuyển đổi (transitions) cho phần tử. Chuyển đổi kích hoạt khi điều kiện đáp ứng. Ví dụ, muốn màu nền nút thay đổi khi người dùng di chuột qua nút.
Bạn dùng thuộc tính CSS transition và thuộc tính con tạo hiệu ứng hoạt ảnh khi thuộc tính HTML phần tử thay đổi.
Hướng dẫn thảo luận, với vài ví dụ, cơ bản CSS transitions và dùng thuộc tính transition tạo hoạt ảnh CSS. Cuối hướng dẫn, bạn chuyên gia làm việc CSS transitions và thuộc tính transition.
CSS Transitions
Mặc định, khi giá trị thuộc tính CSS thay đổi, trang web áp dụng thay đổi ngay lập tức.
Ví dụ, tạo thay đổi kiểu kích hoạt khi con trỏ di qua nút, kiểu mới áp dụng ngay khi người dùng di chuột qua nút. Ngay khi con trỏ rời nút, nút quay về kiểu mặc định tức thì.
Tính năng CSS transition tạo chuyển đổi mượt giữa hai kiểu. Khi dùng thuộc tính transition, trang web hoạt ảnh thay đổi giữa hai kiểu. Tính năng này tạo thay đổi kiểu thẩm mỹ hơn.
Có hai thành phần CSS transition:
- Thuộc tính CSS mới bạn muốn áp dụng cho phần tử.
- Thời gian chuyển đổi (duration).
Mặc định, duration chuyển đổi đặt 0 giây. Nghĩa là nếu không định nghĩa duration, chuyển đổi chỉ định không có hiệu ứng—thay đổi kiểu xảy ra tức thì.
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp 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 việc đầu tiên.
Ví dụ CSS Transition
Giả sử thiết kế nút trang web muốn kiểu nút thay đổi khi người dùng di chuột qua. Khi không di chuột, nút có viền xanh. Khi di chuột, màu nền nút thay đổi từ mặc định (trắng) sang xanh.
Cả hai trạng thái, nút cao 100px rộng 100px, văn bản căn giữa. Chuyển đổi giữa hai trạng thái mất hai giây.
Mã tạo nút:
index.html
<div><p>Đây là nút.</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ã trả về:
[Kết quả mã]
Trong mã, nói nút rộng 100px cao 100px và nội dung căn giữa. Cũng chỉ định viền xanh rắn 3px.
Khi di chuột qua nút, thấy màu nền nút thay thành xanh. Khi di chuột ra, màu nền thay từ xanh về trắng.
Trong ví dụ, chỉ định thời gian chuyển đổi hai giây cho thuộc tính background-color. Nghĩa là khi di chuột qua, màu nền mất hai giây thay từ trắng sang xanh—không tức thì.
Tương tự, khi di chuột ra, màu nền thay từ xanh về trắng qua hai giây—lại không tức thì. Do đó, đạt chuyển đổi mượt hai giây đến/từ màu nền mới dựa trên vị trí con trỏ.
Sau chỉ định kiểu kích hoạt khi di chuột qua. Làm bằng bộ chọn :hover. Chương trình áp dụng kiểu trong :hover cho phần tử khi người dùng di chuột qua.
Nếu quan tâm học thêm bộ chọn CSS :hover, đọc hướng dẫn bộ chọn CSS :hover.
Đường cong Tốc độ Chuyển đổi (Transition Speed Curve)
Thuộc tính transition-timing-function cho phép chỉ định đường cong tốc độ hiệu ứng chuyển đổi. Đây vài giá trị thuộc tính chấp nhận:
Giá trị (và Mô tả Tương ứng) của thuộc tính transition-timing-function
| Giá trị | Mô tả Đường cong Tốc độ Chuyển đổi |
| ease | khởi động chậm, tăng tốc nhanh, kết thúc chậm (giá trị mặc định) |
| ease-in | khởi động chậm, tăng tốc nhanh |
| ease-out | khởi động nhanh, kết thúc chậm |
| linear | tốc độ như nhau từ đầu đến cuối |
| cubic-bezier(n,n,n,n) | chuyển đổi cubic-bezier |
Như thấy, giá trị đầu—"ease"—là mặc định. Nghĩa là nếu không chỉ định giá trị transition-timing-function, hoặc không chỉ định thuộc tính khi định kiểu chuyển đổi, trang web mặc định dùng giá trị này.
Lấy mã ví dụ trước minh họa transition-timing-function. Ví dụ trước, chỉ định "ease". Nghĩa là kiểu nút thay đổi từ kiểu này sang kiểu khác với khởi động chậm, tăng tốc nhanh, kết thúc chậm.
Tuy nhiên, giả sử muốn nút chuyển màu nền dùng chuyển đổi linear. Làm bằng chỉ định "linear". Mã:
<div><p>Đây là nút.</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ã trả về:
[Kết quả mã]
Kiểu chủ yếu giống ví dụ trước. Khác biệt là thay vì ease, chỉ định linear. Nghĩa là tốc độ chuyển đổi đồng đều sau kích hoạt.
Độ trễ Chuyển đổi (Transition Delay)
Thuộc tính transition-delay cho phép chỉ định độ trễ hiệu ứng chuyển đổi. Giá trị gán transition-delay tính bằng giây.
Giả sử muốn nút thay màu nền sau độ trễ một giây. Làm với mã:
<div><p>Đây là nút.</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ã trả về:
[Kết quả mã]
Trong mã, chỉ định độ trễ chuyển đổi một giây. Vậy chuyển đổi không bắt đầu cho đến một giây sau người dùng bắt đầu di chuột qua nút.
Áp dụng Nhiều Chuyển đổi
Khi làm việc chuyển đổi, bạn quyết định muốn nhiều hiệu ứng chuyển đổi xảy ra.
Làm bằng chỉ định nhiều chuyển đổi và tách mỗi chuyển đổi bằng dấu phẩy. Mỗi chuyển đổi có duration, đường cong tốc độ, và thuộc tính khác như chuyển đổi thường.
Ví dụ, lấy nút trước. Giả sử muốn không chỉ đổi màu nền xanh, mà cũng đổi màu viền hồng. Cả hai xảy ra khi di chuột qua. Dùng mã:
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ã trả về:
[Kết quả mã]
Khi di chuột qua, màu nền nút đổi xanh và màu viền đổi hồng nhạt. Chuyển đổi mất hai giây hoàn tất.
Thứ tự mỗi chuyển đổi trong danh sách không ảnh hưởng cách chuyển đổi xuất hiện.
CSS Transition Longhand vs Shorthand (Viết tắt vs Viết đầy đủ)
Trong ví dụ, dùng thuộc tính transition định kiểu chuyển đổi. Thuộc tính transition là viết tắt cho bốn thuộc tính con định nghĩa chuyển đổi CSS. Bốn thuộc tính con:
- transition-property: đặt thuộc tính áp dụng hiệu ứng chuyển đổi.
- transition-duration: chỉ báo chuyển đổi kéo dài bao lâu.
- transition-timing-function: định nghĩa tốc độ chuyển đổi.
- transition-delay: trì hoãn bắt đầu chuyển đổi.
Dùng ví dụ trước minh họa thuộc tính này. Giả sử muốn tạo nút 100x100px viền xanh, nền mặc định (trắng), văn bản căn giữa. Màu nền chuyển xanh khi di chuột qua. Chuyển đổi mất 2 giây, bắt đầu 0.5 giây sau bắt đầu di chuột qua.
Mã hoàn thành:
<div><p>Đây là nút.</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ã trả về:
[Kết quả mã]
Như thấy, tạo nút chuyển đổi đến/từ màu nền xanh. Chuyển đổi xảy ra khi di chuột qua/xa nút.
Trong mã, chỉ định bốn thuộc tính con (transition-property, transition-duration, transition-timing-function, transition-delay) cho chuyển đổi. Cũng dùng kiểu ví dụ trước đặt chiều cao, rộng, căn giữa, màu viền.
Thay vào đó, dùng viết tắt transition. Viết tắt cho phép chỉ định chuyển đổi CSS trên một dòng thay vì bốn dòng. Cú pháp viết tắt:
transition: transition-property transition-duration transition-timing-function transition-delay;
Thứ tự giá trị là thứ tự dùng khi tạo chuyển đổi.
Dùng ví dụ minh họa viết tắt transition. Mã tạo nút trước dùng viết tắt:
<div><p>Đây là nút.</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ã trả về:
[Kết quả mã]
Như thấy, áp dụng cùng kiểu ví dụ trước. Khác biệt là thay vì liệt kê từng thuộc tính con, dùng viết tắt transition.
Kết luận
Thuộc tính CSS transition dùng định nghĩa loại chuyển đổi giữa kiểu. Thuộc tính transition có bốn thuộc tính viết tắt: transition-property, transition-delay, transition-timing-function, transition-duration. Bạn dùng thuộc tính con đặt yếu tố kiểu chuyển đổi riêng lẻ.
Với ví dụ, hướng dẫn thảo luận cách tạo chuyển đổi CSS dùng transition và bốn thuộc tính con. Bây giờ bạn sẵn sàng tạo CSS transitions như nhà phát triển web chuyên nghiệp!