Chức năng & cách sử dụng thuộc tính transition

Trong thiết kế web hiện đại, thuộc tính transition của CSS đóng vai trò quan trọng trong việc tạo ra hiệu ứng chuyển động mượt mà giữa các trạng thái của phần tử. Với transition, bạn có thể dễ dàng thiết lập thời gian, kiểu chuyển đổi và hiệu ứng easing giúp website trở nên sinh động hơn. Chỉ với một vài dòng CSS, bạn có thể cải thiện trải nghiệm người dùng mà không cần đến JavaScript. Hãy cùng khám phá cách sử dụng transition để làm cho giao diện website trở nên chuyên nghiệp hơn!

Chức năng của nhóm thuộc tính transition !?

Chức năng của nhóm thuộc tính transition là dùng để thiết lập hiệu ứng “luân chuyển giá trị” cho một thuộc tính nào đó của phần tử (khi phần tử thay đổi từ trạng thái này sang trạng thái khác)

Ví dụ như phần tử bên dưới, mặc định nó có chiều rộng là 400px, khi người dùng dí con trỏ vào thì chiều rộng sẽ tăng lên một cách “đột ngột” thành 600px. Tuy nhiên, với việc sử dụng nhóm thuộc tính transition thì chúng ta có thể thiết lập hiệu ứng luân chuyển giá trị cho thuộc tính width của phần tử, để chiều rộng của nó tăng lên từ từ, giúp người dùng cảm thấy mượt mà, thú vị hơn, . . . .

<style type="text/css">
	div{
		width:400px;
		color:white;
		font-size:20px;
		line-height:200px;
		text-align:center;
		background-color:#1f951f;
		transition-property:width;
		transition-duration:3s;
	}
	div:hover{width:600px;}
</style>
<div>BẠN HÃY THỬ DÍ CON TRỎ VÀO ĐÂY</div>

Danh sách các thuộc tính transition

Dưới đây là danh sách các thuộc tính nằm trong nhóm transition.

(các bạn vui lòng bấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính)

Điểm khác nhau giữa transition & animation

Chức năng của nhóm thuộc tính transition & animation nhìn thoáng qua thì có vẻ hơi giống nhau, cả hai nhóm thuộc tính này đều tạo ra hiệu ứng chuyển động cho phần tử. Tuy nhiên, hiệu ứng chuyển động của nhóm thuộc tính transition thường chỉ xảy ra khi phần tử bị thay đổi trạng thái do sự tác động của người dùng (ví dụ như khi bị người dùng dí con trỏ vào, . . . .). Còn hiệu ứng chuyển động của nhóm thuộc tính animation thì đã được thiết kế theo một khuôn khổ sẵn, nó có thể chuyển động bất kỳ lúc nào mà không cần đến sự tác động của người dùng.

Thuộc tính transition-property dùng để xác định “thuộc tính” mà các bạn muốn tạo hiệu ứng luân chuyển giá trị cho nó khi phần tử thay đổi trạng thái.

– Cú pháp:

transition-property: value;

– Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị:

– Lưu ý: Nếu các bạn muốn tạo hiệu ứng luân chuyển giá trị cho nhiều thuộc tính (không phải tất cả) thì khi thiết lập giá trị cho thuộc tính transition-property, các bạn cần phải khai báo đầy đủ tên của những thuộc tính mà các bạn muốn tạo hiệu ứng luân chuyển giá trị cho nó (nhớ thêm một dấu phẩy nằm ngăn cách giữa mỗi hai thuộc tính)

Ví dụ:

div{
    background-color:green;
    width:100px;
    height:100px;
    transition-property:width,background-color;
    transition-duration:4s;
}
div:hover{
    background-color:blue;
    width:300px;
    height:300px;
}

Xem ví dụ

– Thông thường, khi một hiệu ứng “luân chuyển giá trị” diễn ra thì mặc định hiệu ứng sẽ chuyển động khá chậm ở giai đoạn đầu, nhanh dần ở giai đoạn giữa, chậm lại ở giai đoạn cuối.

– Tuy nhiên, với việc sử dụng thuộc tính transition-timing-function thì chúng ta có thể thiết lập lại tốc độ chuyển động của hiệu ứng ở từng giai đoạn.

– Cú pháp:

transition-timing-function: value;

– Trong đó, value có thể được xác định dựa theo một trong bảy loại giá trị:

– Thuộc tính transition là cú pháp tổng quát dùng để thiết lập hiệu ứng “luân chuyển giá trị” cho thuộc tính của phần tử khi phần tử thay đổi từ trạng thái này sang trạng thái khác (hay nói cách khác là thay vì phải sử dụng kết hợp bốn thuộc tính transition riêng lẻ thì bây giờ chúng ta chỉ cần dùng mỗi thuộc tính này là đủ)

– Cú pháp:

transition: property duration timing-function delay;

– Trong đó, property duration timing-function delay lần lượt là giá trị của bốn thuộc tính:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

– Tuy nhiên, thuộc tính transition không bắt buộc chúng ta phải gán cho nó đủ bốn giá trị, những giá trị của thuộc tính nào còn thiếu thì trình duyệt sẽ tự động áp dụng giá trị mặc định của thuộc tính đó.

Ví dụ:

div{
    background-color:green;
    width:50px;
    height:50px;
    transition:width 5s;
}
div:hover{
    width:400px;
}

Xem ví dụ