@keyframes swirl{
  from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
  to  { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

#constraints{
height:400px;
  width:400px;
  border: 10px solid black;
}
#square{
top:175px;
  left: 175px;
  position:relative;
  width:50px;
  height:50px;
  background-color:blue;
  -webkit-animation: swirl 4s linear infinite;

}