Как сделать движущийся блок css

Для создания движущегося блока в CSS можно использовать свойство animation. Например:

HTML:

<div class="block"></div>

CSS:

.block {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation: move 2s linear infinite; /* название анимации, время выполнения, тип анимации, количество повторов */
}

@keyframes move {
  0% {
    left: 0; /* начальное положение */
  }
  50% {
    left: 50%; /* положение в середине анимации */
  }
  100% {
    left: 100%; /* конечное положение */
  }
}

Анимация будет двигаться с левой части экрана до правой и обратно бесконечно. Можно изменять свойства блока, менять скорость анимации и тип движения.