Hiệu ứng transition được dùng để hiển thị sự thay đổi thuộc tính của một phần tử trong khoảng thời gian nhất định. transition-property được dùng chỉ định tên thuộc tính CSS sẽ tạo hiệu ứng.
Cú pháp:
transition-property: none | all | property | initial | inherit;
Giá trị thuộc tính:
- none: Giá trị này chỉ định rằng không thuộc tính nào có hiệu ứng transition.
- all: Tất cả thuộc tính CSS sẽ có hiệu ứng transition. Đây cũng là giá trị mặc định của thuộc tính này.
- property: Chúng ta có thể chỉ định tên thuộc tính CSS cho hiệu ứng transition. Bạn có thể chỉ định nhiều thuộc tính bằng dấu phẩy.
- initial: Dùng để đặt thuộc tính này về giá trị mặc định. Giá trị này hữu ích khi bạn không biết giá trị mặc định.
- inherit: Dùng để chỉ định thuộc tính này kế thừa giá trị từ phần tử cha.
Ví dụ: Trong ví dụ dưới, chúng ta chỉ định không thuộc tính nào có hiệu ứng transition. Vì vậy khi di chuột vào ô, sự thay đổi sẽ đột ngột. Thay vì chuyển đổi dần từ giá trị này sang giá trị khác.
html<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
.box {
background-color: red;
width: 300px;
height: 200px;
margin: auto;
transition-property: none;
transition-duration: 2s;
}
.box:hover {
background-color: pink;
width: 200px;
height: 150px;
}
h1,
h2 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>transition-property: none</h2>
<div class="box"></div>
</body>
</html>
Output: 
valuesExample: Thay vì chỉ định tên các thuộc tính cần hiệu ứng transition ta có thể dùng giá trị all. Cách này cho phép hiển thị hiệu ứng transition cho mọi thuộc tính. Không cần chỉ định tên riêng từng thuộc tính như ví dụ dưới đây.
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
.box {
background-color: red;
width: 300px;
height: 200px;
margin: auto;
transition-property: all;
transition-duration: 2s;
}
.box:hover {
background-color: pink;
width: 200px;
height: 150px;
}
h1,
h2 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>transition-property: all</h2>
<div class="box"></div>
</body>
</html>
Output: 
Ví dụ: Chúng ta chỉ định nhiều thuộc tính cho hiệu ứng transition trong ví dụ dưới đây. Cụ thể là background-color, width và height được phân tách bằng dấu phẩy. Khi di chuột qua ô, bạn sẽ thấy hiệu ứng transition của các thuộc tính này.
html<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
.box {
background-color: red;
width: 300px;
height: 200px;
margin: auto;
transition-property: background-color, width, height;
transition-duration: 2s;
}
.box:hover {
background-color: pink;
width: 200px;
height: 150px;
}
h1,
h2 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>
transition-property:
background-color, width, height</h2>
<div class="box"></div>
</body>
</html>
Output: 
Ví dụ: Chúng ta chỉ định giá trị thuộc tính là initial trong ví dụ dưới đây. Vì vậy giá trị mặc định của thuộc tính này (là all) sẽ được gán cho transition property. Do đó hiệu ứng transition sẽ xảy ra cho tất cả thuộc tính CSS khi di chuột qua ô.
html<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
.box {
background-color: red;
width: 300px;
height: 200px;
margin: auto;
transition-property: initial;
transition-duration: 2s;
}
.box:hover {
background-color: pink;
width: 200px;
height: 150px;
}
h1,
h2 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>transition-property: initial</h2>
<div class="box"></div>
</body>
</html>
Output: 
Ví dụ: Chúng ta chỉ định giá trị thuộc tính là inherit trong ví dụ dưới. Vì vậy ô sẽ kế thừa giá trị transition-property của thuộc tính cha. Trong trường hợp này, giá trị transition-property của phần tử cha là all (vì đó là giá trị mặc định). Chúng ta chưa chỉ định giá trị cho phần tử cha. Do đó, hiệu ứng transition sẽ xảy ra cho tất cả thuộc tính CSS.
html<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
.box {
background-color: red;
width: 300px;
height: 200px;
margin: auto;
transition-property: inherit;
transition-duration: 2s;
}
.box:hover {
background-color: pink;
width: 200px;
height: 150px;
}
h1,
h2 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>transition-property: inherit</h2>
<div class="box"></div>
</body>
</html>
Output: 
Trình duyệt được hỗ trợ: Dưới đây là danh sách các trình duyệt hỗ trợ transition-property Property:
- Google Chrome 26.0
- Edge 12.0
- Firefox 16.0
- Opera 12.1
- Safari 9.0