Thuộc tính shorthand transition** cho phép đặt đồng thời 4 thuộc tính: transitionProperty, transitionDuration, transitionTimingFunction, transitionDelay. Cú pháp: transition: property duration timing-function delay. Có thể liệt kê nhiều transition cách nhau bởi dấu phẩy.
Ví dụ minh họa
Mã sau đặt transition cho div2: all properties, 2 giây, ease (mặc định), 0 delay khi nhấn nút:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: 10px;
height: 300px;
width: 400px;
padding: 20px;
border: 2px solid blue;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid blue;
background-color: yellow;
transform: rotateY(45deg);
/* Không có transition mặc định */
}
#div2:hover {
background-color: orange;
width: 50px;
height: 50px;
padding: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<p>Di chuột qua DIV2</p>
<button onclick="setTransition()">Đặt Transition</button>
<div id="div1">DIV1
<div id="div2">DIV2</div>
</div>
<script>
function setTransition() {
document.getElementById("div2").style.transition = "all 2s";
/* Tương đương:
transitionProperty = "all"
transitionDuration = "2s"
transitionTimingFunction = "ease"
transitionDelay = "0s"
*/
}
</script>
</body>
</html>
Cú pháp transition shorthand
transition: <property> <duration> <timing-function> <delay>
- Thứ tự: duration trước delay (cả hai đều là time). Trình duyệt phân biệt: giá trị time đầu tiên = duration, time thứ hai = delay.
- Bỏ qua timing-function → mặc định
ease. - Bỏ qua delay → mặc định
0s. - Nhiều transition:
transition: width 2s, height 1s ease-out 0.5s, opacity 0.3s.
Ví dụ nâng cao: Chuỗi animation
el.style.transition = ` transform 0.3s ease-out, opacity 0.2s ease-in 0.3s, background-color 0.4s ease 0.5s `; /* 1. Transform ngay lập tức 2. Opacity bắt đầu sau 0.3s 3. Background-color bắt đầu sau 0.5s */
Lưu ý: transition shorthand **reset** tất cả 4 thuộc tính con. Nếu chỉ muốn đổi một thứ, dùng thuộc tính con riêng (transitionDuration v.v.) để không ghi đè các giá trị khác.