Как сделал термин “каре” для вставки текста, развиваются?

Проблема в том, где вы определяете left: -100% в вашем файле CSS.

Я предлагаю сделать это, поместив left: -100% внутри класса .hide, а не прямо в контейнер.

#sidebar {
  background-color: #e0e0e0;
  border: 1px solid red;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;   
  /*left: -100%;*/
  right: 0;
  bottom: 0;     
  width: 100%;

}

.hide {
  animation-name: hide;
  animation-duration: 1s;
  left:-100%;
}

.show {
  animation-name: show;
  animation-duration: 1s;

}