Анімація елементів

Потрібно плавно перерсунути блок вправо на 100px не використовуючи CSS-анімацію та JS-бібліотеки.

Подумайте яким чином повинна відбуватися така анімація.

Спробуйте зробити анімацію елемента, аналогічну jQuery.slideToggle().

Зробіть схлопування блока, подібне до jQuery.slideUp(). Добавте розкривання блока, подібне до jQuery.slideUp()

<button>move right 100px</button>
<button>slideToggle</button>
<br><br><br>
<div>lorem ipsum ...</div>

div { padding: 12px 20px; width: 260px; border: 1px solid orange;}

moveRight(selector, duration){
  ???
}

slideToggle(selector, duration){
  ???
}

Домашнє завдання

  1. Закінчіть практичне завдання.
  2. При кліку по body зробіть щоб блок рухався в точку кліка. <button>round</button><br><br><br>
    <div>hello</div>

    body { margin: 0; min-height: 100vh;}
    div { position: absolute; left: 20px; top: 100px; font-size: 60px;}
  3. Зробіть рух блока по колу при кліку на кнопку.
  4. При наведенні миші на блок плавно міняйте фоновий колір сторінки на рандомний безкінечно (по досягненні цільового кольору задайте новий рандомний колір і прагніть до нього).