#img-dice {
  width: 200px;
}

.active {
  animation: roll 5s forwards;  /* forwards - /* will stay in state as at the end of animation *  */
}

.active2 {
  animation: roll2 5s forwards;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(240deg);
  }
}

@keyframes roll2 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-240deg);
  }
}