#gear1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: spinRigth;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#gear2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: spinLeft;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spinRigth {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes spinLeft {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(-360deg);
  }
}

#db3,
#db4 {
  opacity: 0;
}

#db1 {
  animation: moveLeft;
  animation-fill-mode: forwards;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#db2 {
  animation: moveDown;
  animation-fill-mode: forwards;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#db3 {
  animation: showDown1;
  animation-fill-mode: forwards;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#db4 {
  animation: showDown2;
  animation-fill-mode: forwards;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes moveLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  10% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-100%);
    opacity: 1;
  }
  16% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes moveDown {
  15% {
    transform: translateY(0%);
  }
  20% {
    transform: translateY(14.65%);
  }
  30% {
    transform: translateY(14.65%);
  }
  35% {
    transform: translate(100%, 14.65%);
    opacity: 1;
  }
  36% {
    transform: translate(100%, 14.65%);
    opacity: 0;
  }
  100% {
    transform: translate(100%, 14.65%);
    opacity: 0;
  }
}

@keyframes showDown1 {
  0% {
    transform: translateY(-100%);
    opacity:0;
  }
  10% {
    transform: translateY(-100%);
    opacity: 1;
  }
  20% {
    transform: translateY(14.65%);
  }
  35% {
    transform: translateY(14.65%);
  }
  40% {
    transform: translateY(34.65%);
  }
  100% {
    transform: translateY(34.65%);
    opacity: 1;
  }
}

@keyframes showDown2 {
  0% {
    transform: translateY(-100%);
  }
  30% {
    transform: translateY(-100%);
    opacity: 1;
  }
  40% {
    transform: translateY(34.65%);
  }
  100% {
    transform: translateY(34.65%);
    opacity: 1;
  }
}