Animation 실습

목표

붉은 박스 안의 item 이 좌측 파란사각형 상자 -> 우측 녹색 구체
이동하며 점차적으로 모양이 변하도록 하는 animation 만들기

<div class="container">
  <div class="item">
    <span>item</span>
  </div>
</div>

.container{
    width: 100%;
    height: 104px;
    border: 3px solid red;
    position: relative;
}

.item {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    animation: moveBox 2s ease-in-out infinite alternate;
}

.item span {
    color: white;
}

@keyframes moveBox{
    from {
        border-radius: 0;
        left: 0;
        background-color: blue;
    }
    to {
        border-radius: 50%;
        transform: scale(0.75);
        left: calc(100% - 100px);
        background-color: green;
    }
}