Template:3DOneFace/styles.css

/* ================================
   Template:3DOneFace/styles.css
   ================================ */

.onef-wrapper {
  display: inline-block;
  vertical-align: middle;
}

.onef-face {
  display: inline-block;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.onef-low    .onef-face { animation-name: onef-rock-low; }
.onef-normal .onef-face { animation-name: onef-rock-normal; }
.onef-high   .onef-face { animation-name: onef-rock-high; }

@keyframes onef-rock-low {
  0%   { transform: rotate(-15deg); }
  50%  { transform: rotate(15deg); }
  100% { transform: rotate(-15deg); }
}

@keyframes onef-rock-normal {
  0%   { transform: rotate(-40deg); }
  50%  { transform: rotate(40deg); }
  100% { transform: rotate(-40deg); }
}

@keyframes onef-rock-high {
  0%   { transform: rotate(-70deg); }
  50%  { transform: rotate(70deg); }
  100% { transform: rotate(-70deg); }
}

.onef-wrapper:hover .onef-face {
  animation-play-state: paused;
  transform: rotate(0deg);
  transition: transform 0.15s ease-out;
}

.onef-nohover:hover .onef-face {
  animation-play-state: running;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .onef-face {
    animation: none;
    transform: none;
  }
}