Untitled

<DOCTYPE html>
<html>
    <head>
            <style type="text/css">

            #a
            {
			     width: 60px;
				height: 60px;
                background-color: #0000aa;
				border-radius: 100px;
				position: absolute;
				left: 200px;
				top: 200px;
			   animation-name: anima1;
			   animation-duration: 3s;
				 animation-timing-function: linear;
				 animation-iteration-count: infinite;
				 transform-origin: 200px 200px;
            }

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

			  #b
            {
                width: 60px;
				height: 60px;
                background-color: #0000aa;
				border-radius: 100px;
			   animation-name: anima2;
			   animation-duration: 3s;
			   position: absolute;
			   				left: 200px;
				top: 200px;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
				transform-origin: 200px 200px;
            }

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


            </style>
    </head>
    <body>
	<div id="c">
        <div id="a"></div>
        <div id="b"></div>
    </body>
</html>