<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#outerDiv p{
width: 100%;
text-align: center;
}
#outerDiv{
width: 100%;
height: 150px;
border: 1px solid #267326;
padding: 10px;
display: flex;
position: relative;
text-align: center;
}
#innerDiv{
width: 80px;
height: 80px;
background-color: teal;
color: #fff;
line-height: 4;
border: 1px solid #004d4d;
position: absolute;
top: 5%;
left: 1%;
transition: left 1s;
-webkit-transition: left 1s;
transition-delay: 2s;
-webkit-transition-delay: 2s
}
#outerDiv:hover > #innerDiv{
left: 85%;
}
</style>
</head>
<body>
<h1>CSS transition-delay Property</h1>
<div id="outerDiv">
<p>Hover Me</p>
<div id="innerDiv">Div</div>
</div>
<p><strong>Note</strong>: Hover the div for more than 2s.</p> </body>
</html>