Hiệu ứng chuyển đổi Transition trong CSS
Thuộc tính Transition trong CSS được sử dụng khá rộng rãi trong thiết kế web để tạo ra các hiệu ứng chuyển đổi đẹp mắt trên website một cách dễ dàng.
Transition hoạt động bằng cách thay đổi giá trị thuộc tính một cách trơn tru từ giá trị này sang giá trị khác trong khoảng thời gian nhất định. Các tham số thường được sử dụng:
- transition-delay: khoảng thời gian dừng cho mỗi hiệu ứng chuyển đổi.
- transition-duration: khoảng thời gian chuyển đổi diễn ra.
- transition-property: thuộc tính cần chuyển đổi.
- transition-timing-function: tốc độ chuyển đổi diễn ra.
Cách sử dụng Transition trong CSS
Để tạo ra hiệu ứng chuyển đổi Transition, bạn phải xác định ít nhất hai điều:
- Thuộc tính CSS muốn thêm hiệu ứng vào
- Thời gian chuyển đổi diễn ra (duration).
Lưu ý: Nếu phần duration không được chỉ định, quá trình chuyển đổi sẽ không diễn ra mượt mà, trơn tru vì giá trị mặc định bằng 0.
Thay đổi giá trị một thuộc tính
Ví dụ: Phần tử <div> màu tím 100px * 100px, ta chỉ định hiệu ứng Transition cho thuộc tính width, với thời lượng 2 giây:
div {
width: 100px;
height: 100px;
background: purple;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
Hiệu ứng chuyển tiếp sẽ diễn ra khi thuộc tính width được thay đổi giá trị.
div:hover {
width: 300px;
}
Code đầy đủ:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: purple;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Thuộc tính transition</h1>
<p>Di chuột vào phần tử để thấy hiệu ứng transition:</p>
<div></div>
</body>
</html>
Lưu ý: Khi con trỏ di chuyển ra khỏi phần tử, nó sẽ dần thay đổi trở lại kiểu ban đầu.
Thay đổi giá trị nhiều thuộc tính
Ví dụ: Thêm hiệu ứng chuyển tiếp cho cả thuộc tính width và height, với thời lượng 2 giây cho chiều rộng và 4 giây cho chiều cao.
div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}
Tốc độ chuyển đổi
Thuộc tính transition-timing-function dùng để xác định tốc độ thay đổi khi chuyển đổi.
Các giá trị có sẵn như sau:
- ease: tạo hiệu ứng chuyển đổi khi bắt đầu thì chậm sau đó nhanh dần và gần kết thúc lại chậm từ từ (giá trị mặc định).
- linear: tạo hiệu ứng chuyển đổi từ lúc bắt đầu với lúc kết thúc tốc độ là như nhau.
- ease-in: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu.
- ease-out: tạo hiệu ứng chuyển đổi chậm ở lúc kết thúc.
- ease-in-out: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu và lúc kết thúc.
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Bạn tự chạy theo code sau để thấy rõ sự khác nhau nhé:
<!DOCTYPE html>
<html>
<head>
<style>
section{
background-color:#e9d8f4;
}
div {
width: 100px;
height: 50px;
background: #58257b;
color: white;
font-family:arial;
-webkit-transition: width 1s; /* Safari */
transition: width 2s;
}
/* Dành cho Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Cú pháp chuẩn */
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
section:hover #div1, section:hover #div2, section:hover #div3, section:hover
#div4, section:hover #div5{width:500px;
}
</style>
</head>
<body>
<section>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
</section>
</body>
</html>
Độ trễ của hiệu ứng Transition
Thuộc tính transition-delay sử dụng để xác định khoảng thời gian trì hoãn giữa thời gian một thuộc tính thay đổi và lúc chuyển tiếp thực sự bắt đầu.
Ví dụ: Độ trễ 1 giây trước khi bắt đầu chuyển đổi.
div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
Khi rê chuột vào thì hiệu ứng không diễn ra ngay mà sẽ bị delay 1s là thời gian mà chúng ta đặt cho nó.
Code đầy đủ:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #58257b;
-webkit-transition: width 3s; /* Safari */
-webkit-transition-delay: 1s; /* Safari */
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Thuộc tính transition-delay</h1>
<p>Di chuột qua phần tử để thấy thay đổi của hiệu ứng transition:</p>
<div></div>
</body>
</html>
Kết hợp Transition với Transform
Transform Quantrimang đã tìm hiểu ở bài học trước, các bạn vào xem lại 2D Transform ở đây và 3D Transform ở đây nhé.
Kết hợp Transition với Transform với nhau sẽ tạo nên hiệu ứng chuyển tiếp cực kỳ đẹp mắt.
div {
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background:#db7093;
border-radius:5px;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
background:#58257b;
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<div></div>
</body>
</html>
Hiệu ứng như ở đầu bài cũng sử dụng kết hợp Transition và Transform. Bạn thêm một số thuộc tính để thay đổi màu sắc, kiểu chữ, cỡ chữ... theo ý thích của mình. Code bên dưới để bạn tham khảo thêm nhé.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:150px;
height:50px;
background:#db7093;
color:#ffffff;
position:absolute;
font-weight:bold;font-family:arial;
font-size:20px;
padding:10px;
float:left;
margin:5px;
-webkit-transition:-webkit-transform 1s, opacity 1s, background 1s,
width 1s, height 1s,font-size 1s;-webkit-border-radius:5px;
-o-transition-property:width, height, -o-transform, background,
font-size, opacity;-o-transition-duration:1s,1s,1s,1s,1s,1s;
-moz-transition-property:width, height, -o-transform, background,
font-size, opacity;-moz-transition-duration:1s,1s,1s,1s,1s,1s;
transition-property:width, height, transform, background, font-size, opacity;
transition-duration:1s, 1s, 1s, 1s, 1s, 1s;
border-radius: 5px;
opacity: 0.7;
}
div:hover {
opacity:1;
background:#58257b;
width:300px;
height:80px;
font-size:40px;
}
</style>
</head>
<body>
<div class="animated_div">Quản Trị Mạng</div>
</body>
</html>
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

- Lê MạnhThích · Phản hồi · 0 · 31/03/22

Cũ vẫn chất
-
Sạc không dây là gì? Nó nhanh hơn hay chậm hơn sạc dây? Danh sách smartphone Android hỗ trợ sạc không dây
Hôm qua -
4 cách kiểm tra lịch sử giao dịch BIDV trên điện thoại, máy tính
Hôm qua -
Cách sửa lỗi không thấy bộ điều hợp mạng trên Windows 10
Hôm qua -
Hàm COUNTIFS, cách dùng hàm đếm ô theo nhiều điều kiện trong Excel
Hôm qua -
Valentine đen là gì? Valentine đen là ngày nào?
Hôm qua -
Cách dùng Terabox lưu trữ với 1TB miễn phí
Hôm qua 5 -
Cách chặn từ khóa và Hashtag trên Twitter
Hôm qua -
Điều hòa không mát? Nguyên nhân và cách khắc phục
Hôm qua -
Cách đặt độ phân giải tùy chỉnh trong OBS
Hôm qua -
Cách sao chép hoặc tạo bản sao toàn bộ trang tính trong Google Sheets
Hôm qua