Transición de altura agradable: animar después de agregar (shift + enter) y eliminar una línea de texto

Funciona hasta ahora en el uso decontenteditable atributo en el<div> etiquetacon la función de crecimiento automático de un cuadro de texto. También eltransición de altura de la misma. Todo funciona bien, excepto por una cosa, eliminar caracteres, para ser específicos, una línea, no animará su altura, a diferencia de agregar nuevas líneas. Todavía tengo un poco de conocimiento sobre 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>

Cuando presionoCambio + Entrar, tampoco anima, lo hace bien mientras presionaEntrar. Solo la eliminación de líneas y elCambio + Entrar combinación de teclas al ingresar una nueva línea es el problema.

¿Cómo hacer que funcione? ¿Se puede hacer usando CSS puro? ¿O agregarle una función de JavaScript?

Respuestas a la pregunta(2)

Su respuesta a la pregunta