*{
    box-sizing: border-box;
}
body{
    background-color: lightblue;
    margin: 0;
}
img{
    max-width: 100%;
}

.container{
    background-color: hotpink;
    height: 100vh;
    display: flex;
    overflow-y: hide;
    overflow-x: hide;
    justify-content: space-evenly;
    align-items: center;
}

.circle{
    background-color: lightgoldenrodyellow;
    width:100px;
    height: 100px;
    border-radius: 100%;
    /* animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear; */
    animation: pulse 2.5s infinite alternate ease;
}

.square{
    background-color: lightgoldenrodyellow;
    width:100px;
    height: 100px;
    animation: spin 2.5s infinite linear;
}

@keyframes pulse {
    0%{
        background-color: lightgoldenrodyellow;
        transform: scale(1), translateX(-150px);
    }
    100%{
        background-color: hotpink;
        transform: scale(1.5), translateX(150px);
    }
}

@keyframes spin{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

.mover{
    background-color: lightgoldenrodyellow;
    width: 100px;
    height:100px;
    position: absolute;
    bottom:0;
    left: -100px;
    animation: move 5s infinite linear, spin 2.5s infinite linear;
}

@keyframes move {
    0% {
        left: -100px;
    }
    100% {
        left: 100%;
    }
}