过渡效果位置

Question

为什么将代码“ transition：width 2s”放在元素“ div”下而不是“ div：hover”下？毕竟，当将“ div”悬停在上方时，就会发生这种效果。因此，对我来说，将代码“ transition：width 2s”放在“ div：hover”下更有意义。

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

<div></div>