Code Thuộc tính transition trong CSS

Code Thuộc tính transition trong CSS

Code Thuộc tính transition trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính transition 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}
p{margin:0px;padding:15px; background:green; width:250px;color:#fff}
p:hover{width:100%}
span{width:100%; float:left; margin:0px;padding:15px; background-color:green; width:100%;color:#fff}
span:hover{background-color:blue}
</style>
</head>
<body>
<h1>Code Thuộc tính transition trong CSS</h1>

<!--Hiệu ứng chuyển đổi chiều rộng, thời gian 2 giây-->
<div><p style="transition: width 2s">transition: width 2s</p></div>

<!--Hiệu ứng chuyển đổi chiều rộng, thời gian 2 giây, chậm ở lúc bắt đầu và kết thúc-->
<div><p style="transition: width 2s ease-in-out">transition: width 2s ease-in-out</p></div>

<!--Hiệu ứng chuyển đổi chiều rộng, thời gian 2 giây, chậm ở lúc bắt đầu và kết thúc, chờ 1 giây-->
<div><p style="transition: width 2s ease-in-out 1s">transition: width 2s ease-in-out 1s</p></div>

<!--Hiệu ứng chuyển đổi background-color, thời gian 2 giây-->
<div><span style="transition: background-color 2s">transition: background-color 2s</span></div>

<!--Hiệu ứng chuyển đổi background-color, thời gian 2 giây, chậm lúc bắt đầu-->
<div><span style="transition: background-color 2s ease-in">transition: background-color 2s ease-in</span></div>

<!--Hiệu ứng chuyển đổi background-color, thời gian 2 giây, chậm lúc bắt đầu, chờ 1 giây-->
<div><span style="transition: background-color 2s ease-in 1s">transition: background-color 2s ease-in 1s</span></div>

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