.hourglass {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: hourglass-flip 4s ease-in-out infinite;
}

.hourglass-sand-top {
  animation: hourglass-sand-top 4s linear infinite;
}

.hourglass-sand-bottom {
  animation: hourglass-sand-bottom 4s linear infinite;
}

@keyframes hourglass-flip {
  0%, 45% { transform: rotate(0deg); }
  50%, 95% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes hourglass-sand-top {
  0% { d: path("M7 2 L17 2 L12 12 L12 12 Z"); }
  45% { d: path("M12 12 L12 12 L12 12 L12 12 Z"); }
  50% { d: path("M7 2 L17 2 L17 2 L7 2 Z"); }
  95% { d: path("M7 2 L17 2 L12 12 L12 12 Z"); }
  100% { d: path("M7 2 L17 2 L12 12 L12 12 Z"); }
}

@keyframes hourglass-sand-bottom {
  0% { d: path("M7 22 L17 22 L17 22 L7 22 Z"); }
  45% { d: path("M7 22 L17 22 L12 12 L12 12 Z"); }
  50% { d: path("M7 22 L17 22 L12 12 L12 12 Z"); }
  95% { d: path("M12 12 L12 12 L12 12 L12 12 Z"); }
  100% { d: path("M7 22 L17 22 L17 22 L7 22 Z"); }
}