@keyframes dice_move{
  0% {
    transform:rotate(0deg);
  }
  10% {
    transform:rotate(30deg) rotateZ(30deg);
  }
  20% {
    transform:rotate(60deg) rotateZ(60deg);
  }
  30% {
    transform:rotate(90deg) rotateZ(90deg);
  }
  40% {
    transform:rotate(120deg) rotateZ(120deg);
  }
  50% {
    transform:rotate(150deg) rotateZ(150deg);
  }
  60% {
    transform:rotate(180deg) rotateZ(180deg);
  }
  70% {
    transform:rotate(210deg) rotateZ(210deg);
  }
  80% {
    transform:rotate(240deg) rotateZ(270deg);
  }
  90% {
    transform:rotate(270deg) rotateZ(300deg);
  }
  100% {
    transform:rotate(320deg) rotateZ(360deg);
  }
}

@keyframes character_move1{
  0% {
    left:84px;
    bottom:30px;
    transform: scale(1);
  }
  50% {
    bottom: 60px;
    transform: scale(1.1);
  }
  100% {
    left:-236px;
    bottom:0;
    transform: scale(1);
  }
}

@keyframes character_move2{
  0% {
    left:-236px;
    bottom:0;
    transform: scale(1);
  }
  50% {
    bottom: 60px;
    transform: scale(1.1);
  }
  100% {
    left:-556px;
    bottom:0;
    transform: scale(1);
  }
}

@keyframes character_move3{
  0% {
    left:-556px;
    bottom:0;
    transform: scale(1);
  }
  50% {
    bottom: 60px;
    transform: scale(1.1);
  }
  100% {
    left:-876px;
    bottom:0;
    transform: scale(1);
  }
}

@keyframes character_move4{
  0% {
    left:-876px;
    bottom:0;
    transform:scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    transform:scale(1);
    left:-876px;
    bottom:180px;
  }
}

@keyframes character_move5{
  0% {
    left:-876px;
    bottom:180px;
    transform:scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    transform:scale(1);
    left:-876px;
    bottom:355px;
  }
}

@keyframes character_move6{
  0% {
    left:-876px;
    bottom:355px;
    transform:scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    transform:scale(1);
    left:-876px;
    bottom:525px;
  }
}

@keyframes character_move7{
  0% {
    left:-876px;
    bottom:525px;
    transform: scale(1);
  }
  50% {
    bottom: 595px;
    transform: scale(1.1);
  }
  100% {
    left:-556px;
    bottom:525px;
    transform: scale(1);
  }
}

@keyframes character_move8{
  0% {
    left:-556px;
    bottom:525px;
    transform: scale(1);
  }
  50% {
    bottom: 595px;
    transform: scale(1.1);
  }
  100% {
    left:-236px;
    bottom:525px;
    transform: scale(1);
  }
}

@keyframes character_move9{
  0% {
    left:-236px;
    bottom:525px;
    transform: scale(1);
  }
  50% {
    bottom: 595px;
    transform: scale(1.1);
  }
  100% {
    left:84px;
    bottom:525px;
    transform: scale(1);
  }
}



@keyframes character_move10{
  0% {
    left:84px;
    bottom:525px;
    transform:scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    left:84px;
    bottom:355px;
    transform:scale(1);
  }
}

@keyframes character_move11{
  0% {
    left:84px;
    bottom:355px;
    transform:scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    left:84px;
    bottom:180px;
    transform:scale(1);
  }
}
@keyframes character_move12{
  0% {
    left:84px;
    bottom:180px;
    transform:scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    left:84px;
    bottom:30px;
    transform:scale(1);
  }
}
@keyframes rotate01{
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(1140deg);
  }
}

@keyframes rotate02{
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(1260deg);
  }
}

@keyframes rotate03{
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(1380deg);
  }
}
@keyframes dice_view{
  0% {
    opacity:0;
    transform:scale(.3);
  }
  100% {
    opacity:1;
    transform:scale(1);
  }
}