body {
  font-family: Arial, sans-serif;
  padding: 40px;
  background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;}



.box{
  width: 100px;
  height: 100px;
  background-color: aqua;
  animation: moveBox 2s infinite;
  background-image: url('nikofoka.png');
    background-size: cover;
    /* dopasuje obraz do całego pola */
    background-position: center;
    /* ustawi obraz na środku */
}

@keyframes moveBox{
0% {
  transform: translate(0, 0) rotate(0deg);
    background-color: aqua;
}

25% {
  transform: translate(200, 0) rotate(90deg);
    background-color: rebeccapurple;
}

50% {
  transform: translate(200px, 200px) rotate(180deg);
  background-color: blueviolet;
}

75% {
  transform: translate(0,200px) rotate(270deg);
    background-color: fuchsia;
}

100%{
  transform:  translate(0, 0px) rotate(360deg);
  background-color: aqua;
}


}