*{
    box-sizing: border-box;
}

body {
    margin:0;
    background-color:darkolivegreen;
}

.flex {
    display:flex;
    width: 100vw;
    height:100vh;
    align-items:center;
    justify-content:space-around;
}

.circle {
    width:300px;
    height:300px;
    background-color:azure;
    border-radius:50%;
   
    animation: pulse 2s infinite alternate ease-in-out;
}
 
.square {
    width:300px;
    height:300px;
    background-color:azure;

    animation:spin 4s infinite linear;
}

.mover {
    width:200px;
    height:30px;
    background-color: azure;
    position: fixed;
    bottom:0;
    left:0;

    animation:move 4s infinite;
}

@keyframes pulse {
    0%  {
        background-color:azure;
        transform:scale(1);
    }
    100% {
        background-color:tomato; 
        transform:scale(1.3);
    }
}

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

@keyframes move {
    0%{
        transform:translateX(-200px);
    }
    100%{
        transform:translateX(100vw)
    }
}