Trần Ngọc Thanh - 387
- 15/07/2025
Trần Ngọc Thanh Thuộc tính transition trong CSS dùng để tạo hiệu ứng mượt mà trên các phần tử HTML khi có thay đổi về chiều rộng, màu nền, chiều cao, 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
Chức năng của Thuộc tính transition trong CSS
Thuộc tính transition trong CSS dùng để tạo hiệu ứng mượt mà trên các phần tử HTML khi có thay đổi về chiều rộng, màu nền, chiều cao,...
Cú pháp của Thuộc tính transition trong CSS
transition: [property] [duration] [timing-function] [delay];
property: Thuộc tính CSS bạn muốn áp dụng hiệu ứng chuyển đổi như width, height, color, background-color, hoặc all cho tất cả thuộc tính.
duration: Thời gian diễn ra hiệu ứng, thường tính bằng giây (s) hoặc mili giây (ms), ví dụ 1s, 2s, 0.5s.
timing-function: Các kiểu nhanh chậm trong các giai đoạn: bắt đầu, giữa, kết thúc, bao gồm các giá trị dưới đây:
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.
delay: Thời gian chờ trước khi diễn ra hiệu ứng, thường tính bằng giây (s) hoặc mili giây (ms), ví dụ 1s, 2s, 0.5s.
Code Thuộc tính transition trong CSS
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính transition 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}
p{margin:0px;padding:15px; background:green; width:250px;color:#fff}
p:hover{width:100%}
span{width:100%; float:left; margin:0px;padding:15px; background-color:green; width:100%;color:#fff}
span:hover{background-color:blue}
</style>
</head>
<body>
<h1>Code Thuộc tính transition trong CSS</h1>
<!--Hiệu ứng chuyển đổi chiều rộng, thời gian 2 giây-->
<div><p style="transition: width 2s">transition: width 2s</p></div>
<!--Hiệu ứng chuyển đổi chiều rộng, thời gian 2 giây, chậm ở lúc bắt đầu và kết thúc-->
<div><p style="transition: width 2s ease-in-out">transition: width 2s ease-in-out</p></div>
<!--Hiệu ứng chuyển đổi chiều rộng, thời gian 2 giây, chậm ở lúc bắt đầu và kết thúc, chờ 1 giây-->
<div><p style="transition: width 2s ease-in-out 1s">transition: width 2s ease-in-out 1s</p></div>
<!--Hiệu ứng chuyển đổi background-color, thời gian 2 giây-->
<div><span style="transition: background-color 2s">transition: background-color 2s</span></div>
<!--Hiệu ứng chuyển đổi background-color, thời gian 2 giây, chậm lúc bắt đầu-->
<div><span style="transition: background-color 2s ease-in">transition: background-color 2s ease-in</span></div>
<!--Hiệu ứng chuyển đổi background-color, thời gian 2 giây, chậm lúc bắt đầu, chờ 1 giây-->
<div><span style="transition: background-color 2s ease-in 1s">transition: background-color 2s ease-in 1s</span></div>
</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 *
