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

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

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

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính transition-duration 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}

div p{width:100%; height:auto; float:left; margin:0px; padding:15px; background:green; width:100%; color:#fff; transition-property:background-color;}
div p:hover{background-color:blue}

div span{width:100%; height:auto; float:left; margin:0px; padding:15px; background:green; width:300px; color:#fff; transition-property:width; }
div span:hover{width:100%}

</style>
</head>
<body>

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

<p>Dùng để quy định thời gian diễn ra cho một hiệu ứng transition thay đổi thường tính bằng giây (s) hoặc mili giây (ms), hãy rê chuột vào ô màu xanh để xem thời gian diễn ra 1 hiệu ứng:</p>

<!--transition-duration: 0.5s;-->
<div><p style="transition-duration: 0.5s;">transition-duration: 0.5s;</p></div>

<!--transition-duration: 2s;-->
<div><p style="transition-duration: 2s;">transition-duration: 2s;</p></div>

<!--transition-duration: 3s;-->
<div><span  style="transition-duration: 3s;">transition-duration: 3s;</span></div>

<!--transition-duration: 6s;-->
<div><span  style="transition-duration: 6s;">transition-duration: 6s;</span></div>

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