Untitled

<DOCTYPE !HTML>
<html>
    <head>
        <style>

            #kwadrat1
            {
                top: 100px;
                left: 800px;
                width: 50px;
                height: 50px;
                position: absolute;
                animation-duration: 3s;
                transform-origin: 125px 125px;
                 animation-name: eeee;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
				border-radius:30px;
            }

            @keyframes eeee
            {
                    0%   {transform: rotate(0deg); background-color: #000066;}
                    25% {background-color: #0000e6;}
                    50% {background-color: #4d4dff;}
                    75% {background-color: #0000e6;}
                    100% {transform: rotate(360deg); background-color: #000066;}
            }

            #kwadrat2
            {
                top: 100px;
                left: 800px;
                width: 50px;
                height: 50px;
                position: absolute;
                animation-duration: 3s;
                transform-origin: 125px 125px;
                animation-name: eee;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
				border-radius:30px;
            }

            @keyframes eee
            {
                    0%   {transform: rotate(360deg); background-color: #000066;}
                    25% {background-color: #0000e6;}
                    50% {background-color: #4d4dff;}
                    75% {background-color: #0000e6;}
                    100% {transform: rotate(0deg); background-color: #000066;}
            }


        </style>
    </head>
    <body>
        <div id="kwadrat1"></div>
        <div id="kwadrat2"></div>
        <div id="kwadrat3"></div>
        <div id="kwadrat4"></div>
    </div>
    </body>
</html>