.box1 {
  border: 20px;
  
  background-color: transparent;
  background-image: url("/img/brummel.jpg");
  border-radius: 10px;
  width: 240px;
  height: 240px;
  animation-name: rotate; 
  
  animation-duration: 3.0s;
  animation-iteration-count:inherit;
  animation-play-state:inherit;
}

.box1:hover {
  animation-play-state: running;
}


@keyframes rotate {
  0% {
    transform: rotate1(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.box2 {
  float: right;
  margin-right: 10px;
  background-color: transparent;
  background-image: url("/img/brummi.jpg");
  border-radius: 10px;
  position 280px;;
  width: 240px;
  height: 240px;
  animation-name: rotate2; 
  /*   */
  animation-duration: 3.0s;
  animation-iteration-count:inherit;
  animation-play-state:inherit;
}
@keyframes rotate2 {
  0% {
    transform: rotate1(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}