Как сделать так, чтобы ширина элемента заголовка медленно уходила влево

Question

У меня есть меню на стороне гамбургера и элемент заголовка, и когда я щелкаю по этому меню гамбургера, я хочу, чтобы заголовок отображался начальным, а ширина заголовка медленно увеличивалась влево, как мне это сделать.

header {
  width: 0px;
  background-color: black;
  padding-bottom: 10px;
  display: none;
  position: absolute;
}

.hamburger {
  width: 20px;
  background-color: black;
  margin: 3px;
  height: 3px;
  top: 22px;
  left: 100px;
}

<header>.</header>
<div id="main">
  <div class="hamburger"></div>
  <div class="hamburger"></div>
  <div class="hamburger"></div>
</div>

Answer 1

Вы можете использовать css transition для анимации, когда header width идет от 0 to 100%

document.getElementById('main').onclick = function() {
  document.getElementById('header').classList.add('show');
}

html,
body {
  padding: 0;
  margin: 0;
}

header {
  width: 0px;
  background-color: black;
  position: absolute;
  transition: all 0.5s;
  overflow: hidden;
}

header.show {
  width: 100%;
}

.hamburger {
  width: 20px;
  background-color: black;
  margin: 3px;
  height: 3px;
  top: 22px;
  left: 100px;
}

<header id="header">
  <div style="padding: 1em;">
    header
  </div>
</header>
<div id="main">
  <div class="hamburger"></div>
  <div class="hamburger"></div>
  <div class="hamburger"></div>
</div>