Đối với nhiều chuyển tiếp, hãy sử dụng thuộc tính chuyển tiếp CSS3, là thuộc tính viết tắt. Nó đặt thuộc tính, thời lượng, thời gian và độ trễ của quá trình chuyển đổi trong một dòng duy nhất.
Sau đây là mã để thực hiện nhiều chuyển đổi bằng CSS3 -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s, border-radius 2s;
}
.container:hover div {
width: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Multiple transitions example</h1>
<div class="container">
<div></div>
</div>
<h2>
Hover over the above div to reduce its width and to change it into circle
</h2>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
