<body>
  <ul id="nav">
    <li><a class="listItem" href="/">HOME</a></li>
    <li><a class="listItem" href="/">PROJECTS</a></li>
    <li><a class="listItem" href="/">TESTIMONIALS</a></li>
    <li><a class="listItem" href="/">ABOUT</a></li>
    <li><a class="listItem" href="/">CONTACT</a></li>
  </ul>  
</body>
body{
  background-color: #415A8A;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
#nav {
  display: inline-block;
  text-align: center;
  padding: 10px;
  margin: auto;
}
#nav li{
  list-style-type: none;
}
.listItem{  
  width: 150px;
  display: block;
  position: relative;
  background-color: #2C3E60;
  border-radius: 3px;
  padding: 10px;
  margin: 10px;
  color: #778DA9;
  text-decoration: none;
  transition: all 750ms;
}
.listItem:hover{
  background-color: #778DA9;
  color: #FFFFFF;
  z-index: 10;
}

var time = 1;
var listItems = document.getElementsByClassName("listItem");
var myVar = setInterval(myTimer, 50);
var speed = 0.25;
var size = 5.0;

function myTimer() {
  for(var i = 0; i < listItems.length; i++){
    if(listItems[i].parentElement.querySelector
    (':hover') === listItems[i]){
      listItems[i].style.transform = "rotate(0deg)";
    }else{
      listItems[i].style.transform = "translate("+String(Math.cos(i*5.0+time*speed)*size)+"px,"+String(Math.sin(i*5.0+time*speed)*size)+"px) rotate("+String(Math.sin(i*5.0+time*speed)*size)+"deg)";
    }
  }
  time++;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js