.kutija
{
width: 500px;
height: 500px;
background-color: red ;
animation: boja 6s infinite;
}

@keyframes boja
{
    0%{ background-color: red;}
    25%{background-color: aqua;}
    50%{ background-color: blue;}
    75%{ background-color: blueviolet;}
    100%{ background-color: green;}
}


.vrtikrug
{
width: 300px;
height: 250px;
background: orange;
animation: spin 2s linear infinite;
animation: leti 5s infinite;
}

@keyframes spin
{
    from {transform: rotate(0deg);}
    to{transform: rotate(50000deg);}
    0%{ background-color: red;}
    25%{background-color: aqua;}
    50%{ background-color: blue;}
    75%{ background-color: blueviolet;}
    100%{ background-color: green;}
}

@keyframes leti
{
0%{transform: translateX(0) rotate(0deg);}
50%{transform: translateX(1000px) rotate(1200deg);}
 0%{ background-color: red;}
    25%{background-color: aqua;}
    50%{ background-color: blue;}
    25%{ background-color: blueviolet;}
    100%{ background-color: green;
50%{transform: translateX(1000px) rotate(1200deg);}
0%{transform: translateX(0px) rotate(0deg);}

}

