.dice {
    text-align: center;
    margin: 0 auto;
    margin-top: 30vh;

    width: 300px;
}

.jumb {
    -webkit-animation: xxTD 1s cubic-bezier(0.17,0.67,0.93,0.26) infinite;
    animation: xxTD 1s cubic-bezier(0.17,0.67,0.93,0.26) infinite;
}
 
.roll {
    -webkit-animation: xxRT .1s infinite;
    animation: xxRT .1s infinite
} 


@-webkit-keyframes xxRT {
  0% {
      -webkit-transform: rotateZ(45deg) skewX(5deg);
      transform: rotateZ(45deg) skewX(5deg)
  }

  25% {
      -webkit-transform: rotateZ(75deg) skewX(15deg);
      transform: rotateZ(75deg) skewX(15deg)
  }

  50% {
      -webkit-transform: rotateZ(-25deg) skewX(-20deg);
      transform: rotateZ(-25deg) skewX(-20deg)
  }

  75% {
      -webkit-transform: rotateZ(-55deg) skewX(-15deg);
      transform: rotateZ(-55deg) skewX(-15deg)
  }

  to {
      -webkit-transform: rotateZ(0deg) skewX(0);
      transform: rotateZ(0deg) skewX(0)
  }
}

@keyframes xxRT {
  0% {
      -webkit-transform: rotateZ(45deg) skewX(5deg);
      transform: rotateZ(45deg) skewX(5deg)
  }

  25% {
      -webkit-transform: rotateZ(75deg) skewX(15deg);
      transform: rotateZ(75deg) skewX(15deg)
  }

  50% {
      -webkit-transform: rotateZ(-25deg) skewX(-20deg);
      transform: rotateZ(-25deg) skewX(-20deg)
  }

  75% {
      -webkit-transform: rotateZ(-55deg) skewX(-15deg);
      transform: rotateZ(-55deg) skewX(-15deg)
  }

  to {
      -webkit-transform: rotateZ(0deg) skewX(0);
      transform: rotateZ(0deg) skewX(0)
  }
}


@-webkit-keyframes xxTD {
  0%,to {
      -webkit-transform: translateY(0);
      transform: translateY(0)
  }

  25% {
      -webkit-transform: translateY(-5vw) translateX(3vw);
      transform: translateY(-5vw) translateX(3vw)
  }

  50% {
      -webkit-transform: translateY(-15vw);
      transform: translateY(-15vw)
  }

  75% {
      -webkit-transform: translateY(-5vw) translateX(-3vw);
      transform: translateY(-5vw) translateX(-3vw)
  }
}

@keyframes xxTD {
  0%,to {
      -webkit-transform: translateY(0);
      transform: translateY(0)
  }

  25% {
      -webkit-transform: translateY(-5vw) translateX(3vw);
      transform: translateY(-5vw) translateX(3vw)
  }

  50% {
      -webkit-transform: translateY(-15vw);
      transform: translateY(-15vw)
  }

  75% {
      -webkit-transform: translateY(-5vw) translateX(-3vw);
      transform: translateY(-5vw) translateX(-3vw)
  }
}