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

1) 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>

2) 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)

3) Đ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.

transition-property: value;

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;
}

transition-timing-function: value;

transition: property duration timing-function delay;

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