새로고침 했을 때 의도치 않은 애니메이션 효과

안녕하세요. 코드를 고치고 화면을 새로고침했을 때, hover 했을 때에만 움직여야 할 사각형들이 기본적으로 조금 부웅.. 움직이더라고요. 이것저것 고쳐봐도 그러던데 왜 그런 건가요?

아래는 현재 css 코드입니다.

.box-container {display: flex;}

.box {

  width: 100px; height: 100px; background: rgba(255, 255, 0, 0.7); border: 2px solid black;

  transition: 3s cubic-bezier(0, 1.3, 1, 1.17);

  transition-property:width height background-color;

}

.box:hover {

  transform: scale(1.5);

  background-color: green;

}