@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:64px;
    bottom:70px;
    transform: scale(1);
  }
  50% {
    bottom: 60px;
    transform: scale(1.1);
  }
  100% {
    left:-162px;
    bottom:7px;
    transform: scale(1);
  }
}

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

@keyframes character_move3{
  0% {
    left:-392px;
    bottom:7px;
    transform: scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    left:-392px;
    bottom:212px;
    transform: scale(1);
  }
}

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

@keyframes character_move5{
  0% {
    left:-392px;
    bottom:416px;
    transform:scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    transform:scale(1);
    left:-392px;
    bottom:620px;
  }
}

@keyframes character_move6{
  0% {
    left:-392px;
    bottom:620px;
    transform:scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    transform:scale(1);
    left:-392px;
    bottom:826px;
  }
}

@keyframes character_move7{
  0% {
    left:-392px;
    bottom:826px;
    transform: scale(1);
  }
  50% {
    bottom: 856px;
    transform: scale(1.1);
  }
  100% {
    left:-162px;
    bottom:826px;
    transform: scale(1);
  }
}

@keyframes character_move8{
  0% {
    left:-162px;
    bottom:826px;
    transform: scale(1);
  }
  50% {
    bottom: 856px;
    transform: scale(1.1);
  }
  100% {
    left:64px;
    bottom:826px;
    transform: scale(1);
  }
}

@keyframes character_move9{
  0% {
    left:64px;
    bottom:826px;
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    left:64px;
    bottom: 620px;
    transform: scale(1);
  }
}



@keyframes character_move10{
  0% {
    left:64px;
    bottom: 620px;
    transform:scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    left:64px;
    bottom: 416px;
    transform:scale(1);
  }
}

@keyframes character_move11{
  0% {
    left:64px;
    bottom: 416px;
    transform:scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    left:64px;
    bottom: 212px;
    transform:scale(1);
  }
}
@keyframes character_move12{
  0% {
    left:64px;
    bottom: 212px;
    transform:scale(1);
  }
  50% {
    transform:scale(1.2);
  }
  100% {
    left:64px;
    bottom:70px;
    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);
  }
}