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;
            }

            @keyframes eeee
            {
                    0%   {transform: rotate(0deg); background-color: #0B491A; border-radius: 50px;}
					25% {background-color: #146628; border-radius: 30px;}
					50% {background-color: #26B248; border-radius: 10px;}
					75% {background-color: #146628; border-radius: 30px;}
                    100% {transform: rotate(360deg); background-color: #0B491A; border-radius: 50px;}
            }

            #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;
            }

            @keyframes eee
            {
                    0%   {transform: rotate(360deg); background-color: #26B248; border-radius: 50px;}
					25% {background-color: #146628; border-radius: 30px;}
					50% {background-color: #0B491A; border-radius: 10px;}
					75% {background-color: #146628; border-radius: 30px;}
                    100% {transform: rotate(0deg); background-color: #26B248; border-radius: 50px;}
            }


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