.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;
}
.wrap:hover>div {
left: 380px;
background: blue;
color : white;
}
.ex1 {
transition: all 1s ease-in;
}
.ex2 {
transition: all 0.5s 1s;
}
.ex3 {
transition: left 2s;
}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<h2>transition 마우스를 오버하세요.</h2>
<div class="wrap">
<div class="ex1">all 0.5s ease-in</div>
<div class="ex2">all 0.5s 1s</div>
<div class="ex3">left 2s</div>
</div>
</body>
</html>