Bùi Tấn Lực - 28
- 11/10/2025
Bùi Tấn Lực Thuộc tính transition-timing-function trong CSS dùng để quy định cách chạy nhanh chậm của hiệu ứng ở các giai đoạn: đầu, giữa, cuối, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính transition-timing-function trong CSS
Chức năng của Thuộc tính transition-timing-function trong CSS
Thuộc tính transition-timing-function trong CSS dùng để quy định cách chạy nhanh chậm của hiệu ứng ở các giai đoạn: đầu, giữa, cuối.
Các giá trị của Thuộc tính transition-timing-function trong CSS
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.
Code Thuộc tính transition-timing-function trong CSS
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính transition-timing-function trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; height:auto; float:left; border:1px solid red; margin-bottom: 10px}
span{width:100%; height:auto; float:left; margin:0px; padding:15px; background:green; width:300px; color:#fff; transition-property:width; transition-duration: 3s; }
span:hover{width:100%}
p{margin:0px; padding:0px}
</style>
</head>
<body>
<h1>Code Thuộc tính transition-timing-function trong CSS</h1>
<!--transition-timing-function: ease;-->
<p>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).</p>
<div><span style="transition-timing-function: ease;">transition-timing-function: ease;</span></div>
<!--transition-timing-function: linear;-->
<p>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</p>
<div><span style="transition-timing-function: linear;">transition-timing-function: linear;</span></div>
<!--transition-timing-function: ease-in;-->
<p>ease-in: tạo hiệu ứng chuyển đổi chậm ở lúc bắt đầu.</p>
<div><span style="transition-timing-function: ease-in;">transition-timing-function: ease-in;</span></div>
<!--transition-timing-function: ease-out;-->
<p>ease-out: tạo hiệu ứng chuyển đổi chậm ở lúc kết thúc.</p>
<div><span style="transition-timing-function: ease-out;">transition-timing-function: ease-out;</span></div>
<!--transition-timing-function: ease-in-out;-->
<p>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.</p>
<div><span style="transition-timing-function: ease-in-out;">transition-timing-function: ease-in-out;</span></div>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính transition-timing-function 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 *
