Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css transition-delay</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#hcnhat{width:40px;height:40px;background:red;float:left;margin-right:20px;transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; -webkit-transition:0.3s;-webkit-transition-delay: 1s; /* Safari */  transition-delay: 1s;}
#hcnhat:hover{width:100px}
#hccao{width:40px;height:40px;background:red;float:left;transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; -webkit-transition:0.3s;-webkit-transition-delay: 1s; /* Safari */  transition-delay: 1s;}
#hccao:hover{height:100px}
#divco{width:100%;float:left;height:auto;color:#000;margin-top:30px;transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; -webkit-transition:0.3s;-webkit-transition-delay: 1s; /* Safari */  transition-delay: 1s;}
#divco:hover{color:red}
</style>
</head>
<body>
<h1>Chạy thử Css transition-delay</h1>
<div id="hcnhat">
</div>
<div id="hccao">
</div>
<div id="divco">Chạy thử Css transition-delay</div>
</body>
</html>