纯css打造线条组合显示时间的动态效果

代码语言:html

所属分类:布局界面

代码描述:纯css打造线条组合显示时间的动态效果

代码标签: 线条 组合 显示 间的 动态 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400'>
<style>
/* CONFIGURATION */
/* DEFINE CHARACTERS (0-9 and colon) */
/* HELPER FUNCTIONS */
/* STYLING */
body {
  background: #212121;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  text-align: center;
  color: white;
}

h1 {
  color: #e91e63;
  font-weight: 300;
  font-size: 3rem;
  margin-bottom: 0;
}

p {
  color: #b6b6b6;
}

a {
  color: inherit;
}

label {
  display: inline-block;
  padding: .5rem 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #e91e63;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
label:before {
  content: attr(data-trigger-off);
}
label:hover {
  background: #c2185b;
  box-shadow: 0 3px 5px 0 black;
}
label:active {
  top: 1px;
}

*, *:before, *:after {
  box-sizing: border-box;
  transition: all 200ms linear;
}

.clock {
  display: flex;
  width: 750px;
  margin: 3rem auto 0;
}

.no {
  display: flex;
  flex-wrap: wrap;
  width: 150px;
}
.no > * {
  width: 20%;
  height: 30px;
  background: black;
  border: 1px solid rgba(182, 182, 182, 0.4);
  position: relative;
  border-radius: 50%;
}
.no > *:before, .no > *:after {
  content: '';
  display: block;
  position: absolute;
  width: 2px;
  height: 47.5%;
  background: white;
  transform-origin: bottom center;
  left: 50%;
  top: 10%;
}

/* MIXINS */
/* INCREMENT NUMBERS */
/* SET INITIAL NUMBERS */
.no > *:nth-child(1):before {
  transform: rotateZ(90deg);
}
.no > *:nth-child(1):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(2):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(2):after {
  transform: rotateZ(90deg);
}
.no > *:nth-child(3):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(3):after {
  transform: rotateZ(90deg);
}
.no > *:nth-child(4):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(4):after {
  transform: rotateZ(90deg);
}
.no > *:nth-child(5):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(5):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(6):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(6):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(7):before {
  transform: rotateZ(90deg);
}
.no > *:nth-child(7):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(8):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(8):after {
  transform: rotateZ(90deg);
}
.no > *:nth-child(9):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(9):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(10):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(10):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(11):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(11):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(12):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(12):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(13):before {
  transform: rotateZ(45deg);
}
.no > *:nth-child(13):after {
  transform: rotateZ(45deg);
}
.no > *:nth-child(14):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(14):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(15):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(15):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(16):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(16):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(17):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(17):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(18):before {
  transform: rotateZ(45deg);
}
.no > *:nth-child(18):after {
  transform: rotateZ(45deg);
}
.no > *:nth-child(19):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(19):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(20):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(20):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(21):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(21):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(22):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(22):after {
  transform: rotateZ(90deg);
}
.no > *:nth-child(23):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(23):after {
  transform: rotateZ(90deg);
}
.no > *:nth-child(24):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(24):after {
  transform: rotateZ(0deg);
}
.no > *:nth-child(25):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(25):after {
  transform: rotateZ(180deg);
}
.no > *:nth-child(26):before {
  transform: rotateZ(0deg);
}
.no > *:nth-child(26):after {
  transform: rotateZ(90deg);
}
.no > *:nth-child(27):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(27):after {
  transform: rotateZ(90deg);
}
.no > *:nth-child(28):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(28):after {
  transform: rotateZ(90deg);
}
.no > *:nth-child(29):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(29):after {
  transform: rotateZ(90deg);
}
.no > *:nth-child(30):before {
  transform: rotateZ(270deg);
}
.no > *:nth-child(30):after {
  transform: rotateZ(0deg);
}
.no--colon > *:nth-child(1):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(1):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(2):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(2):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(3):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(3):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(4):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(4):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(5):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(5):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(6):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(6):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(7):before {
  transform: rotateZ(90deg);
}
.no--colon > *:nth-child(7):after {
  transform: rotateZ(180deg);
}
.no--colon > *:nth-child(8):before {
  transform: rotateZ(270deg);
}
.no--colon > *:nth-child(8):after {
  transform: rotateZ(90deg);
}
.no--colon > *:nth-child(9):before {
  transform: rotateZ(270deg);
}
.no--colon > *:nth-child(9):after {
  transform: rotateZ(180deg);
}
.no--colon > *:nth-child(10):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(10):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(11):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(11):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(12):before {
  transform: rotateZ(0deg);
}
.no--colon > *:nth-child(12):after {
  transform: rotateZ(90deg);
}
.no--colon > *:nth-child(13):before {
  transform: rotateZ(270deg);
}
.no--colon > *:nth-child(13):after {
  transform: rotateZ(90deg);
}
.no--colon > *:nth-child(14):before {
  transform: rotateZ(0deg);
}
.no--colon > *:nth-child(14):after {
  transform: rotateZ(270deg);
}
.no--colon > *:nth-child(15):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(15):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(16):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(16):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(17):before {
  transform: rotateZ(90deg);
}
.no--colon > *:nth-child(17):after {
  transform: rotateZ(180deg);
}
.no--colon > *:nth-child(18):before {
  transform: rotateZ(270deg);
}
.no--colon > *:nth-child(18):after {
  transform: rotateZ(90deg);
}
.no--colon > *:nth-child(19):before {
  transform: rotateZ(270deg);
}
.no--colon > *:nth-child(19):after {
  transform: rotateZ(180deg);
}
.no--colon > *:nth-child(20):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(20):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(21):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(21):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(22):before {
  transform: rotateZ(0deg);
}
.no--colon > *:nth-child(22):after {
  transform: rotateZ(90deg);
}
.no--colon > *:nth-child(23):before {
  transform: rotateZ(270deg);
}
.no--colon > *:nth-child(23):after {
  transform: rotateZ(90deg);
}
.no--colon > *:nth-child(24):before {
  transform: rotateZ(0deg);
}
.no--colon > *:nth-child(24):after {
  transform: rotateZ(270deg);
}
.no--colon > *:nth-child(25):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(25):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(26):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(26):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(27):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(27):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(28):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(28):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(29):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(29):after {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(30):before {
  transform: rotateZ(45deg);
}
.no--colon > *:nth-child(30):after {
  transform: rotateZ(45deg);
}
.no--min-units > *:nth-child(1):before {
  animation: min-units-before-1 600s infinite;
}
.no--min-units > *:nth-child(1):after {
  animation: min-units-after-1 600s infinite;
}
@keyframes min-units-before-1 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(90deg);
  }
  48% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(90deg);
  }
  78% {
    transform: rotateZ(90deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
@keyframes min-units-after-1 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(180deg);
  }
  28% {
    transform: rotateZ(180deg);
  }
  30% {
    transform: rotateZ(180deg);
  }
  38% {
    transform: rotateZ(180deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  58% {
    transform: rotateZ(180deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(180deg);
  }
  78% {
    transform: rotateZ(180deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(2):before {
  animation: min-units-before-2 600s infinite;
}
.no--min-units > *:nth-child(2):after {
  animation: min-units-after-2 600s infinite;
}
@keyframes min-units-before-2 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(90deg);
  }
  18% {
    transform: rotateZ(90deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(270deg);
  }
  48% {
    transform: rotateZ(270deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(270deg);
  }
  78% {
    transform: rotateZ(270deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-2 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(180deg);
  }
  18% {
    transform: rotateZ(180deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(90deg);
  }
  78% {
    transform: rotateZ(90deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(3):before {
  animation: min-units-before-3 600s infinite;
}
.no--min-units > *:nth-child(3):after {
  animation: min-units-after-3 600s infinite;
}
@keyframes min-units-before-3 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(270deg);
  }
  18% {
    transform: rotateZ(270deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(270deg);
  }
  78% {
    transform: rotateZ(270deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-3 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(90deg);
  }
  18% {
    transform: rotateZ(90deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(90deg);
  }
  78% {
    transform: rotateZ(90deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(4):before {
  animation: min-units-before-4 600s infinite;
}
.no--min-units > *:nth-child(4):after {
  animation: min-units-after-4 600s infinite;
}
@keyframes min-units-before-4 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(270deg);
  }
  18% {
    transform: rotateZ(270deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(270deg);
  }
  78% {
    transform: rotateZ(270deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-4 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(180deg);
  }
  18% {
    transform: rotateZ(180deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(90deg);
  }
  78% {
    transform: rotateZ(90deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(5):before {
  animation: min-units-before-5 600s infinite;
}
.no--min-units > *:nth-child(5):after {
  animation: min-units-after-5 600s infinite;
}
@keyframes min-units-before-5 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(270deg);
  }
  78% {
    transform: rotateZ(270deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-5 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(180deg);
  }
  28% {
    transform: rotateZ(180deg);
  }
  30% {
    transform: rotateZ(180deg);
  }
  38% {
    transform: rotateZ(180deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  58% {
    transform: rotateZ(180deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(180deg);
  }
  78% {
    transform: rotateZ(180deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(6):before {
  animation: min-units-before-6 600s infinite;
}
.no--min-units > *:nth-child(6):after {
  animation: min-units-after-6 600s infinite;
}
@keyframes min-units-before-6 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(0deg);
  }
  28% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  38% {
    transform: rotateZ(0deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  58% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(0deg);
  }
  78% {
    transform: rotateZ(0deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-6 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  58% {
    transform: rotateZ(180deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(90deg);
  }
  78% {
    transform: rotateZ(90deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(7):before {
  animation: min-units-before-7 600s infinite;
}
.no--min-units > *:nth-child(7):after {
  animation: min-units-after-7 600s infinite;
}
@keyframes min-units-before-7 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(0deg);
  }
  18% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(270deg);
  }
  78% {
    transform: rotateZ(270deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
@keyframes min-units-after-7 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(90deg);
  }
  18% {
    transform: rotateZ(90deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  58% {
    transform: rotateZ(180deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(90deg);
  }
  78% {
    transform: rotateZ(90deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(8):before {
  animation: min-units-before-8 600s infinite;
}
.no--min-units > *:nth-child(8):after {
  animation: min-units-after-8 600s infinite;
}
@keyframes min-units-before-8 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(270deg);
  }
  18% {
    transform: rotateZ(270deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(270deg);
  }
  78% {
    transform: rotateZ(270deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-8 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(180deg);
  }
  18% {
    transform: rotateZ(180deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(90deg);
  }
  78% {
    transform: rotateZ(90deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(9):before {
  animation: min-units-before-9 600s infinite;
}
.no--min-units > *:nth-child(9):after {
  animation: min-units-after-9 600s infinite;
}
@keyframes min-units-before-9 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(0deg);
  }
  18% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(270deg);
  }
  78% {
    transform: rotateZ(270deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-9 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(180deg);
  }
  18% {
    transform: rotateZ(180deg);
  }
  20% {
    transform: rotateZ(180deg);
  }
  28% {
    transform: rotateZ(180deg);
  }
  30% {
    transform: rotateZ(180deg);
  }
  38% {
    transform: rotateZ(180deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(180deg);
  }
  78% {
    transform: rotateZ(180deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(10):before {
  animation: min-units-before-10 600s infinite;
}
.no--min-units > *:nth-child(10):after {
  animation: min-units-after-10 600s infinite;
}
@keyframes min-units-before-10 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(0deg);
  }
  28% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  38% {
    transform: rotateZ(0deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  58% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(0deg);
  }
  78% {
    transform: rotateZ(0deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-10 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(180deg);
  }
  28% {
    transform: rotateZ(180deg);
  }
  30% {
    transform: rotateZ(180deg);
  }
  38% {
    transform: rotateZ(180deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(180deg);
  }
  78% {
    transform: rotateZ(180deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(11):before {
  animation: min-units-before-11 600s infinite;
}
.no--min-units > *:nth-child(11):after {
  animation: min-units-after-11 600s infinite;
}
@keyframes min-units-before-11 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(45deg);
  }
  38% {
    transform: rotateZ(45deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  58% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-11 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(180deg);
  }
  28% {
    transform: rotateZ(180deg);
  }
  30% {
    transform: rotateZ(45deg);
  }
  38% {
    transform: rotateZ(45deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  58% {
    transform: rotateZ(180deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(12):before {
  animation: min-units-before-12 600s infinite;
}
.no--min-units > *:nth-child(12):after {
  animation: min-units-after-12 600s infinite;
}
@keyframes min-units-before-12 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  58% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-12 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(180deg);
  }
  38% {
    transform: rotateZ(180deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(13):before {
  animation: min-units-before-13 600s infinite;
}
.no--min-units > *:nth-child(13):after {
  animation: min-units-after-13 600s infinite;
}
@keyframes min-units-before-13 {
  8% {
    transform: rotateZ(45deg);
  }
  10% {
    transform: rotateZ(0deg);
  }
  18% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(90deg);
  }
  48% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-13 {
  8% {
    transform: rotateZ(45deg);
  }
  10% {
    transform: rotateZ(180deg);
  }
  18% {
    transform: rotateZ(180deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(14):before {
  animation: min-units-before-14 600s infinite;
}
.no--min-units > *:nth-child(14):after {
  animation: min-units-after-14 600s infinite;
}
@keyframes min-units-before-14 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(0deg);
  }
  18% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(0deg);
  }
  28% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  38% {
    transform: rotateZ(0deg);
  }
  40% {
    transform: rotateZ(270deg);
  }
  48% {
    transform: rotateZ(270deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(0deg);
  }
  78% {
    transform: rotateZ(0deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-14 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(180deg);
  }
  18% {
    transform: rotateZ(180deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(180deg);
  }
  78% {
    transform: rotateZ(180deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
.no--min-units > *:nth-child(15):before {
  animation: min-units-before-15 600s infinite;
}
.no--min-units > *:nth-child(15):after {
  animation: min-units-after-15 600s infinite;
}
@keyframes min-units-before-15 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(0deg);
  }
  28% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  38% {
    transform: rotateZ(0deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(0deg);
  }
  78% {
    transform: rotateZ(0deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-15 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(180deg);
  }
  28% {
    transform: rotateZ(180deg);
  }
  30% {
    transform: rotateZ(180deg);
  }
  38% {
    transform: rotateZ(180deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  58% {
    transform: rotateZ(180deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(180deg);
  }
  78% {
    transform: rotateZ(180deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(16):before {
  animation: min-units-before-16 600s infinite;
}
.no--min-units > *:nth-child(16):after {
  animation: min-units-after-16 600s infinite;
}
@keyframes min-units-before-16 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(0deg);
  }
  28% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(45deg);
  }
  38% {
    transform: rotateZ(45deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  58% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-16 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(180deg);
  }
  28% {
    transform: rotateZ(180deg);
  }
  30% {
    transform: rotateZ(45deg);
  }
  38% {
    transform: rotateZ(45deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(17):before {
  animation: min-units-before-17 600s infinite;
}
.no--min-units > *:nth-child(17):after {
  animation: min-units-after-17 600s infinite;
}
@keyframes min-units-before-17 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  38% {
    transform: rotateZ(0deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-17 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(180deg);
  }
  28% {
    transform: rotateZ(180deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(90deg);
  }
  48% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(18):before {
  animation: min-units-before-18 600s infinite;
}
.no--min-units > *:nth-child(18):after {
  animation: min-units-after-18 600s infinite;
}
@keyframes min-units-before-18 {
  8% {
    transform: rotateZ(45deg);
  }
  10% {
    transform: rotateZ(0deg);
  }
  18% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-18 {
  8% {
    transform: rotateZ(45deg);
  }
  10% {
    transform: rotateZ(180deg);
  }
  18% {
    transform: rotateZ(180deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(270deg);
  }
  48% {
    transform: rotateZ(270deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(19):before {
  animation: min-units-before-19 600s infinite;
}
.no--min-units > *:nth-child(19):after {
  animation: min-units-after-19 600s infinite;
}
@keyframes min-units-before-19 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(0deg);
  }
  18% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(0deg);
  }
  78% {
    transform: rotateZ(0deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-19 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(180deg);
  }
  18% {
    transform: rotateZ(180deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(180deg);
  }
  38% {
    transform: rotateZ(180deg);
  }
  40% {
    transform: rotateZ(90deg);
  }
  48% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  58% {
    transform: rotateZ(180deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(180deg);
  }
  78% {
    transform: rotateZ(180deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(20):before {
  animation: min-units-before-20 600s infinite;
}
.no--min-units > *:nth-child(20):after {
  animation: min-units-after-20 600s infinite;
}
@keyframes min-units-before-20 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(0deg);
  }
  28% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  38% {
    transform: rotateZ(0deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  58% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(0deg);
  }
  78% {
    transform: rotateZ(0deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-20 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(180deg);
  }
  38% {
    transform: rotateZ(180deg);
  }
  40% {
    transform: rotateZ(270deg);
  }
  48% {
    transform: rotateZ(270deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  58% {
    transform: rotateZ(180deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(180deg);
  }
  78% {
    transform: rotateZ(180deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(21):before {
  animation: min-units-before-21 600s infinite;
}
.no--min-units > *:nth-child(21):after {
  animation: min-units-after-21 600s infinite;
}
@keyframes min-units-before-21 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(0deg);
  }
  28% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
@keyframes min-units-after-21 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(180deg);
  }
  28% {
    transform: rotateZ(180deg);
  }
  30% {
    transform: rotateZ(180deg);
  }
  38% {
    transform: rotateZ(180deg);
  }
  40% {
    transform: rotateZ(90deg);
  }
  48% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  58% {
    transform: rotateZ(180deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(22):before {
  animation: min-units-before-22 600s infinite;
}
.no--min-units > *:nth-child(22):after {
  animation: min-units-after-22 600s infinite;
}
@keyframes min-units-before-22 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(0deg);
  }
  28% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(270deg);
  }
  48% {
    transform: rotateZ(270deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-22 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(90deg);
  }
  48% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(23):before {
  animation: min-units-before-23 600s infinite;
}
.no--min-units > *:nth-child(23):after {
  animation: min-units-after-23 600s infinite;
}
@keyframes min-units-before-23 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(0deg);
  }
  18% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(270deg);
  }
  48% {
    transform: rotateZ(270deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-23 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(180deg);
  }
  18% {
    transform: rotateZ(180deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(24):before {
  animation: min-units-before-24 600s infinite;
}
.no--min-units > *:nth-child(24):after {
  animation: min-units-after-24 600s infinite;
}
@keyframes min-units-before-24 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(0deg);
  }
  18% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  38% {
    transform: rotateZ(0deg);
  }
  40% {
    transform: rotateZ(90deg);
  }
  48% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  58% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(0deg);
  }
  78% {
    transform: rotateZ(0deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-24 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(180deg);
  }
  18% {
    transform: rotateZ(180deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(180deg);
  }
  78% {
    transform: rotateZ(180deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
.no--min-units > *:nth-child(25):before {
  animation: min-units-before-25 600s infinite;
}
.no--min-units > *:nth-child(25):after {
  animation: min-units-after-25 600s infinite;
}
@keyframes min-units-before-25 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  38% {
    transform: rotateZ(0deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  58% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(0deg);
  }
  78% {
    transform: rotateZ(0deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-25 {
  8% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(180deg);
  }
  28% {
    transform: rotateZ(180deg);
  }
  30% {
    transform: rotateZ(180deg);
  }
  38% {
    transform: rotateZ(180deg);
  }
  40% {
    transform: rotateZ(270deg);
  }
  48% {
    transform: rotateZ(270deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  58% {
    transform: rotateZ(180deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
  68% {
    transform: rotateZ(180deg);
  }
  70% {
    transform: rotateZ(180deg);
  }
  78% {
    transform: rotateZ(180deg);
  }
  80% {
    transform: rotateZ(180deg);
  }
  88% {
    transform: rotateZ(180deg);
  }
  90% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--min-units > *:nth-child(26):before {
  animation: min-units-before-26 600s infinite;
}
.no--min-units > *:nth-child(26):after {
  animation: min-units-after-26 600s infinite;
}
@keyframes min-units-before-26 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(0deg);
  }
  28% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  38% {
    transform: rotateZ(0deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  58% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-26 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(27):before {
  animation: min-units-before-27 600s infinite;
}
.no--min-units > *:nth-child(27):after {
  animation: min-units-after-27 600s infinite;
}
@keyframes min-units-before-27 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-27 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(28):before {
  animation: min-units-before-28 600s infinite;
}
.no--min-units > *:nth-child(28):after {
  animation: min-units-after-28 600s infinite;
}
@keyframes min-units-before-28 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(0deg);
  }
  18% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-28 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(90deg);
  }
  18% {
    transform: rotateZ(90deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(90deg);
  }
  48% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(45deg);
  }
  78% {
    transform: rotateZ(45deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(29):before {
  animation: min-units-before-29 600s infinite;
}
.no--min-units > *:nth-child(29):after {
  animation: min-units-after-29 600s infinite;
}
@keyframes min-units-before-29 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(0deg);
  }
  18% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(0deg);
  }
  48% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(0deg);
  }
  78% {
    transform: rotateZ(0deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes min-units-after-29 {
  8% {
    transform: rotateZ(90deg);
  }
  10% {
    transform: rotateZ(270deg);
  }
  18% {
    transform: rotateZ(270deg);
  }
  20% {
    transform: rotateZ(90deg);
  }
  28% {
    transform: rotateZ(90deg);
  }
  30% {
    transform: rotateZ(90deg);
  }
  38% {
    transform: rotateZ(90deg);
  }
  40% {
    transform: rotateZ(270deg);
  }
  48% {
    transform: rotateZ(270deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  58% {
    transform: rotateZ(90deg);
  }
  60% {
    transform: rotateZ(90deg);
  }
  68% {
    transform: rotateZ(90deg);
  }
  70% {
    transform: rotateZ(90deg);
  }
  78% {
    transform: rotateZ(90deg);
  }
  80% {
    transform: rotateZ(90deg);
  }
  88% {
    transform: rotateZ(90deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--min-units > *:nth-child(30):before {
  animation: min-units-before-30 600s infinite;
}
.no--min-units > *:nth-child(30):after {
  animation: min-units-after-30 600s infinite;
}
@keyframes min-units-before-30 {
  8% {
    transform: rotateZ(270deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(0deg);
  }
  28% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  38% {
    transform: rotateZ(0deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  58% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(0deg);
  }
  68% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(0deg);
  }
  78% {
    transform: rotateZ(0deg);
  }
  80% {
    transform: rotateZ(0deg);
  }
  88% {
    transform: rotateZ(0deg);
  }
  90% {
    transform: rotateZ(0deg);
  }
  98% {
    transform: rotateZ(0deg);
  }
}
@keyframes min-units-after-30 {
  8% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(45deg);
  }
  18% {
    transform: rotateZ(45deg);
  }
  20% {
    transform: rotateZ(270deg);
  }
  28% {
    transform: rotateZ(270deg);
  }
  30% {
    transform: rotateZ(270deg);
  }
  38% {
    transform: rotateZ(270deg);
  }
  40% {
    transform: rotateZ(45deg);
  }
  48% {
    transform: rotateZ(45deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  58% {
    transform: rotateZ(270deg);
  }
  60% {
    transform: rotateZ(270deg);
  }
  68% {
    transform: rotateZ(270deg);
  }
  70% {
    transform: rotateZ(270deg);
  }
  78% {
    transform: rotateZ(270deg);
  }
  80% {
    transform: rotateZ(270deg);
  }
  88% {
    transform: rotateZ(270deg);
  }
  90% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
.no--sec-tens > *:nth-child(1):before {
  animation: sec-tens-before-1 60s infinite;
}
.no--sec-tens > *:nth-child(1):after {
  animation: sec-tens-after-1 60s infinite;
}
@keyframes sec-tens-before-1 {
  14.6666666667% {
    transform: rotateZ(90deg);
  }
  16.6666666667% {
    transform: rotateZ(45deg);
  }
  31.3333333333% {
    transform: rotateZ(45deg);
  }
  33.3333333333% {
    transform: rotateZ(90deg);
  }
  48% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  64.6666666667% {
    transform: rotateZ(90deg);
  }
  66.6666666667% {
    transform: rotateZ(90deg);
  }
  81.3333333333% {
    transform: rotateZ(90deg);
  }
  83.3333333333% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
@keyframes sec-tens-after-1 {
  14.6666666667% {
    transform: rotateZ(180deg);
  }
  16.6666666667% {
    transform: rotateZ(45deg);
  }
  31.3333333333% {
    transform: rotateZ(45deg);
  }
  33.3333333333% {
    transform: rotateZ(180deg);
  }
  48% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  64.6666666667% {
    transform: rotateZ(180deg);
  }
  66.6666666667% {
    transform: rotateZ(180deg);
  }
  81.3333333333% {
    transform: rotateZ(180deg);
  }
  83.3333333333% {
    transform: rotateZ(180deg);
  }
  98% {
    transform: rotateZ(180deg);
  }
}
.no--sec-tens > *:nth-child(2):before {
  animation: sec-tens-before-2 60s infinite;
}
.no--sec-tens > *:nth-child(2):after {
  animation: sec-tens-after-2 60s infinite;
}
@keyframes sec-tens-before-2 {
  14.6666666667% {
    transform: rotateZ(270deg);
  }
  16.6666666667% {
    transform: rotateZ(90deg);
  }
  31.3333333333% {
    transform: rotateZ(90deg);
  }
  33.3333333333% {
    transform: rotateZ(270deg);
  }
  48% {
    transform: rotateZ(270deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  64.6666666667% {
    transform: rotateZ(270deg);
  }
  66.6666666667% {
    transform: rotateZ(270deg);
  }
  81.3333333333% {
    transform: rotateZ(270deg);
  }
  83.3333333333% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes sec-tens-after-2 {
  14.6666666667% {
    transform: rotateZ(90deg);
  }
  16.6666666667% {
    transform: rotateZ(180deg);
  }
  31.3333333333% {
    transform: rotateZ(180deg);
  }
  33.3333333333% {
    transform: rotateZ(90deg);
  }
  48% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  64.6666666667% {
    transform: rotateZ(90deg);
  }
  66.6666666667% {
    transform: rotateZ(180deg);
  }
  81.3333333333% {
    transform: rotateZ(180deg);
  }
  83.3333333333% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--sec-tens > *:nth-child(3):before {
  animation: sec-tens-before-3 60s infinite;
}
.no--sec-tens > *:nth-child(3):after {
  animation: sec-tens-after-3 60s infinite;
}
@keyframes sec-tens-before-3 {
  14.6666666667% {
    transform: rotateZ(270deg);
  }
  16.6666666667% {
    transform: rotateZ(270deg);
  }
  31.3333333333% {
    transform: rotateZ(270deg);
  }
  33.3333333333% {
    transform: rotateZ(270deg);
  }
  48% {
    transform: rotateZ(270deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  64.6666666667% {
    transform: rotateZ(270deg);
  }
  66.6666666667% {
    transform: rotateZ(45deg);
  }
  81.3333333333% {
    transform: rotateZ(45deg);
  }
  83.3333333333% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes sec-tens-after-3 {
  14.6666666667% {
    transform: rotateZ(90deg);
  }
  16.6666666667% {
    transform: rotateZ(90deg);
  }
  31.3333333333% {
    transform: rotateZ(90deg);
  }
  33.3333333333% {
    transform: rotateZ(90deg);
  }
  48% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  64.6666666667% {
    transform: rotateZ(90deg);
  }
  66.6666666667% {
    transform: rotateZ(45deg);
  }
  81.3333333333% {
    transform: rotateZ(45deg);
  }
  83.3333333333% {
    transform: rotateZ(90deg);
  }
  98% {
    transform: rotateZ(90deg);
  }
}
.no--sec-tens > *:nth-child(4):before {
  animation: sec-tens-before-4 60s infinite;
}
.no--sec-tens > *:nth-child(4):after {
  animation: sec-tens-after-4 60s infinite;
}
@keyframes sec-tens-before-4 {
  14.6666666667% {
    transform: rotateZ(270deg);
  }
  16.6666666667% {
    transform: rotateZ(270deg);
  }
  31.3333333333% {
    transform: rotateZ(270deg);
  }
  33.3333333333% {
    transform: rotateZ(270deg);
  }
  48% {
    transform: rotateZ(270deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  64.6666666667% {
    transform: rotateZ(270deg);
  }
  66.6666666667% {
    transform: rotateZ(45deg);
  }
  81.3333333333% {
    transform: rotateZ(45deg);
  }
  83.3333333333% {
    transform: rotateZ(270deg);
  }
  98% {
    transform: rotateZ(270deg);
  }
}
@keyframes sec-tens-after-4 {
  14.6666666667% {
    transform: rotateZ(90deg);
  }
  16.6666666.........完整代码请登录后点击上方下载按钮下载查看

网友评论0