인프런 커뮤니티 질문&답변

.container {
  position: relative;
  width: 100%;
  height: 104px;
  /* height:104px 이유 : box-sizing:border-box 설정 때문
   */
  background: rebeccapurple;
  border: 2px solid red;
}
.item {
  width: 100px;
  height: 100px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  animation-name: moveBox;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  position: absolute;
}
.item span {
  color: white;
}
@keyframes moveBox {
  from {
    border-radius: 0;
    left: 0;
  }
  to {
    border-radius: 50%;
    left: calc(100% - 100px);
  }
}

item에 애니메이션 효과를 넣고 .container에서 범위에 벗어나지 않게 @keyframes moveBox에서 left:calc(100% - 100px)을 했는데 영상 설명에서 .item width 크기가 100px이라고 하셨는데 이해가 잘 되지 않아서 질문드립니다ㅠㅠ