* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box{
    height: 300px;
    width: 300px;
    display: flex;
    justify-content: center;
    background-color: chartreuse;
    animation: aliveBox 4s infinite ;
}


@keyframes aliveBox {
  0% {
    transform: translateX(0) scale(1);
    background-color: #3498db;
  }
  50% {
    transform: translateX(250px) scale(1.6); 
    background-color: #e74c3c; 
  }
  100% {
    transform: translateX(0) scale(1); 
    background-color: #3498db; 
  }
}
.box2{
    height: 200px;
    width: 200px;
    background-color: ghostwhite;
    animation: rainbow 5s infinite;
}
@keyframes rainbow{
    0%{
        background: red;
    }
    10%{
        background:orange;
    }
    15%{
        background: yellow;
    }
    20%{
        background: green;
    }
    25%{
        background: blue;
    }
    30%{
        background: violet;
    }
}
.box3{
    height: 300px;
    width: 300px;
    background-color: brown;

    animation: pulse 0.1s infinite;
}
@keyframes pulse{
    0%{
        transform: scale(0.0000001);
    }
    50%{
        transform:scale(1.3)
    }
    100%{
        transform: scale(1);
    }
}
.box4{
    height: 300px;
    width: 300px;
    display: flex;
    justify-content: center;
    background-color: chartreuse;
    animation: box4 2s infinite;
}
@keyframes box4{
    from{
        transform: translate(100px);
    }
}