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>

<div><p style="transition: width 2s">transition: width 2s</p></div>

<div><p style="transition: width 2s ease-in-out">transition: width 2s ease-in-out</p></div>

<div><p style="transition: width 2s ease-in-out 1s">transition: width 2s ease-in-out 1s</p></div>

<div><span style="transition: background-color 2s">transition: background-color 2s</span></div>

<div><span style="transition: background-color 2s ease-in">transition: background-color 2s ease-in</span></div>

<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