Ngọc Thanh - 27
- 15/07/2025
Ngọc Thanh 
Thuộc tính transition trong CSS là một loại thuộc tính của CSS dùng để tạo hiệu ứng nhẹ nhàng khi rê chuột, những hiệu ứng như thay đổi màu chữ, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính transition trong CSS
Thuộc tính transition trong CSS là gì?
Thuộc tính transition trong CSS là một loại thuộc tính của CSS dùng để tạo hiệu ứng nhẹ nhàng khi rê chuột, những hiệu ứng như thay đổi màu chữ, thay đổi chiều cao, thay đổi chiều rộng khi rê chuột vào một thuộc tính HTML.
Những kiểu Thuộc tính transition trong CSS
CSS Transition mặc định
CSS Transition mặc định sẽ dùng chung cho nhiều loại như thay đổi màu chữ, thay đổi chiều cao, thay đổi chiều rộng khi rê chuột vào một thuộc tính HTML.
{transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; -webkit-transition:0.3s;}
-moz-transition hỗ trợ cho firefox.
-webkit-transition hỗ trợ cho Google Chrome và Safari.
-o-transition hỗ trợ cho Opera.
Css transition-delay
Css transition-delay cài đặt số thời gian chờ mỗi lần thay đổi, lúc rê chuột vào và lúc bỏ chuột ra đều có thời gian chờ khi sử dụng Css transition-delay, thuộc tính này không phải lúc nào cũng dùng, khi nào cần mới dùng.
{-webkit-transition-delay: 1s; /* Safari */ transition-delay: 1s;}
Css transition-timing-function
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.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css transition-timing-function</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#timingease{width:40px;height:40px;background:red;clear: both;margin-right:20px;transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; -webkit-transition:3s;transition-timing-function: ease}
#timingease:hover{width:200px}
#timinglinear{width:40px;height:40px;background:red;clear: both;margin-right:20px;transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; -webkit-transition:3s;transition-timing-function: linear}
#timinglinear:hover{width:200px}
#timingease-in{width:40px;height:40px;background:red;clear: both;margin-right:20px;transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; -webkit-transition:3s;transition-timing-function: ease-in}
#timingease-in:hover{width:200px}
#timingease-out{width:40px;height:40px;background:red;clear: both;margin-right:20px;transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; -webkit-transition:3s;transition-timing-function: ease-out}
#timingease-out:hover{width:200px}
#timingease-in-out{width:40px;height:40px;background:red;clear: both;margin-right:20px;transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; -webkit-transition:3s;transition-timing-function: ease-in-out}
#timingease-in-out:hover{width:200px}
</style>
</head>
<body>
<h1>Chạy thử Css transition-timing-function</h1>
<h2>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).</h2>
<div id="timingease">ease</div><br>
<h2>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.</h2>
<div id="timinglinear">linear</div><br>
<h2>Tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu.</h2>
<div id="timingease-in">ease-in</div><br>
<h2>Tạo hiệu ứng chuyển đổi chậm ở lúc kết thúc.</h2>
<div id="timingease-out">ease-out</div><br>
<h2>Tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu và lúc kết thúc.</h2>
<div id="timingease-in-out">ease-in-out</div><br>
</body>
</html>
Lời kết
Cảm ơn bạn đã tham khảo bài viết Thuộc tính transition trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
