<div class="label">Spostamento</div>
<div class="element animation move"></div>

<div class="label">Rotazione</div>
<div class="element animation rotate"></div>

<div class="label">Trasformazione</div>
<div class="element animation rotate-t"></div>

<div class="label">Aspetto</div>
<div class="element animation rotate-t-color"></div>

:root {
  --element-size: 80px;
}

body {
  font-family: tahoma, verdana, arial;
  overflow: none;
}

* {
  box-sizing: border-box;
}

.label {
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
}

.element {
  display: block;
  position: relative;
  width: var(--element-size);
  height: var(--element-size);
  background-color: blue;
}

.animation {
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.animation.move {
  animation-duration: 8s;
  animation-name: animation_move;
}
.animation.rotate {
  animation-duration: 6s;
  animation-name: animation_rotate;
}
.animation.rotate-t {
  animation-duration: 10s;
  animation-name: animation_rotate_t;
}
.animation.rotate-t-color {
  animation-duration: 12s;
  animation-name: animation_rotate_t_c;
}
@keyframes animation_move {
  0% {
    left: 0px;
  }
  100% {
    left: calc(90vw - var(--element-size));
  }
}

@keyframes animation_rotate {
  0% {
    left: 0px;
  }
  100% {
    left: calc(90vw - var(--element-size));
    transform: rotate(360deg);
  }
}

@keyframes animation_rotate_t {
  0% {
    left: 0px;
  }
  50% {
    border-radius: 50%;
  }
  100% {
    left: calc(90vw - var(--element-size));
    transform: rotate(360deg);
  }
}

@keyframes animation_rotate_t_c {
  0% {
    left: 0px;
  }
  20% {
    border: 1px solid black;
  }
  30% {
    border: 2px solid black;
  }
  40% {
    border: 3px solid black;
  }
  60% {
    border: 5px solid black;
    border-radius: 50%;
    background-color: transparent;
    border: 5px solid black;
  }
  100% {
    left: calc(90vw - var(--element-size));
    transform: rotate(360deg);
    background-color: transparent;
    border: 5px solid black;
    border-radius: 50%;
  }
}