.wrap {
width: 500px;
border: 1px solid #ccc;
margin-top: 1em;
padding: 1em;
}
.wrap>div {
position: relative;
width: 100px;
margin: 5px;
padding: 5px;
white-space: nowrap;
left: 0px;
height: 20px;
background-color: pink;
transition-property: all;
transition-duration: 2s;
}
.wrap:hover>div {
left: 380px;
}
.ex1 {
transition-delay: 500ms;
}
.ex2 {
transition-delay: 0.5s;
}
.ex3 {
transition-delay: 1s;
}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<h2>transition-delay 마우스를 오버하세요.</h2>
<div class="wrap">
<div class="ex1">500ms</div>
<div class="ex2">0.5s</div>
<div class="ex3">1s</div>
</div>
</body>
</html>