Transição de altura editável por conteúdo: animar após adicionar (shift + enter) e remover uma linha de texto

Até agora, funciona usando ocontenteditable atributo no<div> etiqueta, rótulo, palavra-chavecom o recurso de crescimento automático de uma caixa de texto. Também otransição altura dele. Tudo funciona bem, exceto por uma coisa, excluir caracteres, para ser específico, uma linha, não animará sua altura, ao contrário da adição de novas linhas. Eu ainda tenho um pouco de conhecimento em CSS.

.autogrow {
  border: 1px solid rgb( 0, 0, 0 );
  padding: 10px;
}
@keyframes line_insert {
  from {
    height: 0px;
  }
  to {
    height: 20px;
  }
}
.autogrow[contenteditable] > div {
  animation-duration: 250ms;
  animation-name: line_insert;
}
.autogrow[contenteditable] {
  overflow: hidden;
  line-height: 20px;
}
<div class="autogrow" contenteditable="true"></div>

Quando eu pressionoMudança + Entrar, também não anima, mas funciona bem ao pressionarEntrar. Apenas a remoção de linhas e oMudança + Entrar combinação de teclas ao inserir uma nova linha é o problema.

Como fazer dar certo? Isso pode ser feito usando CSS puro? Ou adicionando uma função javascript para isso?

questionAnswers(2)

yourAnswerToTheQuestion