@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;   -webkit-animation: swirl 4s linear infinite;
  animation-play-state:paused;}