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