Code Thuộc tính transition-property trong CSS

Code Thuộc tính transition-property trong CSS

Code Thuộc tính transition-property trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính transition-property trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; height:auto; float:left; border:1px solid red; margin-bottom: 10px}

#background-color{margin:0px; padding:15px; background:green; width:100%; color:#fff; transition-duration: 2s;}
#background-color:hover{background-color:blue}

#id-width{margin:0px; padding:15px; background:green; width:300px; color:#fff; transition-duration: 2s;}
#id-width:hover{width:100%}

#id-height{margin:0px; padding:15px; height:50px; background:green; width:300px; color:#fff; transition-duration: 2s;}
#id-height:hover{height:100px}

#id-width-height{margin:0px; padding:15px; height:50px; background:green; width:300px; color:#fff; transition-duration: 2s;}
#id-width-height:hover{height:100px; width:100%}

</style>
</head>
<body>

<h1>Code Thuộc tính transition-property trong CSS</h1>

<p>Dùng để quy định những thuộc tính css nào được chuyển đổi trong một hiệu ứng transition, hãy rê chuột vào ô màu xanh để xem những thuộc tính css nào được chuyển đổi:</p>

<!--Thuộc tính css: background-color-->
<div><p id="background-color" style="transition-property:background-color;">transition-property:background-color;</p></div>

<!--Thuộc tính css: width-->
<div><p id="id-width" style="transition-property:width;">transition-property:width;</p></div>

<!--Thuộc tính css: height-->
<div><p id="id-height" style="transition-property:height;">transition-property:height;</p></div>

<!--Thuộc tính css: width, height-->
<div><p id="id-width-height" style="transition-property:width, height;">transition-property:width, height;</p></div>

</body>
</html>
Code Thuộc tính transition-property trong CSS nằm trong bài viết Thuộc tính transition-property trong CSS