@keyframes swirl {
  from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
 }  
 
#constraints
{ 
  height: 400px;
  width: 400px;
  border: 1px solid black; 
}
#square
{ 
top: 175px;
left: 175px; 
position: relative;
height: 50px;
width: 50px;
background: blue;
 border-radius:50%;
-webkit-animation: swirl 4s linear infinite;
  animation-play-state: paused;
}