body {
  margin: 0;
  background: #292b3a;
}

.ball {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
  margin: -25px auto;
  transform-origin: 0 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 43px solid #d2bc35;
  transform-origin: 50% 90%;
  animation: spin 1s cubic-bezier(.56,1.55,.51,.74) infinite;
  
  &:after,
  &:before{
    content:"";
    position: absolute;
    top: 43px;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 43px solid #d2bc35;
  }
  
  &:after {
    left: 0px;
    animation: shiftright 1s cubic-bezier(.56,1.55,.51,.74) infinite;
    border-bottom: 43px solid lighten(#d2bc35, 10%);
  }
  &:before {
    left: -50px;
    animation: shiftleft 1s cubic-bezier(.56,1.55,.51,.74) infinite;
    border-bottom: 43px solid darken(#d2bc35, 10%);
  }
  
}

@keyframes spin {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(0.5) translateY(20px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

@keyframes shiftleft {
  0% {
    transform: translate3d(0,0,0);
  }
  50% {
    transform: translate3d(25px,-43px,0);
  }
  100% {
    transform: translate3d(0,0,0);
  }
}
@keyframes shiftright {
  0% {
    transform: translate3d(0,0,0);
  }
  50% {
    transform: translate3d(-25px,-43px,0);
  }
  100% {
    transform: translate3d(0,0,0);
  }
}

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

/*@keyframes {
  0% {
    transform: ;
  }
  50% {
    
  }
  100% {
    
  }
}*/