<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{text-align: center; margin: 50px;}
div:hover {
background-color: black;
color: white;
transition-duration: 1s;
}
</style>
</head>
<body>
<div>안녕</div>
</body>
</html>
저렇게 코드를 짜 두면 div에서 마우스가 떨어졌을 때 서서히 원상태로 복구가 되는게 아니라
그냥 뚝 하고 원상태로 복구가 되는데, 왜 이러는 건가요...