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