$c: #ecf0f1;

body { background: #8e44ad; }

.hexagon {
  font-size: 200px;
  font-size: 50vmin;
  background: $c;
  position: relative;
  width: .5773502691896258em; // = 1/sqrt(3) because the internet tells me so
  height: 1em;
  transition: .5s;
  animation-play-state: paused;
  &:hover {
    background: rgba($c,.5);
    transition: .7s;
    animation: .25s spin steps(2) infinite alternate 1s; // you can control the direction it spins WITH YOUR MIND
  }
  &:before, &:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    background: inherit;
  }
  &:before { transform: rotate(60deg); }
  &:after { transform: rotate(120deg); }
}

@keyframes spin {
  to { transform: rotate(.5turn); }
}