Движение блока по диагонали css html

Question

Добрый день) Мне необходимо чтобы блок, который находится в определенной точке(в середине) двигался по диагонали к своему углу и исчезал за экраном

Answer 1

Используйте translateX и translateY

@keyframes moveDiagonally {
    0% {
        transform: translatex(0px) translatey(0px)
    }
    100% {
        transform: translatex(100px) translatey(100px);
    }
}

После чего для анимируемого объекта пропишите в CSS свойство animation с названием вашей анимации, созданной через @keyframes и другими параметрами.

Справка по animation

Answer 2

div {
  margin: 2rem;
  width: 30px;
  height: 30px;
  background-color: purple;
  animation: 1s linear 0s infinite alternate move;
}

@keyframes move {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(200px, 200px)
  }
}

<div></div>

БЛОГ НА HUSL

Движение блока по диагонали css html

Ответы (2 шт):