Contenteditable Height transition

Question

I have a contenteditable div which grows as the user types.

I now need to transition the height so that when the user presses Enter, the div would grow s

Answer 1

@keyframes lineInserted {
  from {
    height: 0;
  }
  to {
    height: 20px; /* cons: hardcoded height */
  }
}
div[contenteditable] > div {
  animation-duration: 300ms;
  animation-name: lineInserted;
  transition: height 300ms;
}
div[contenteditable] {
  border: 1px solid black;
  max-height: 200px;
  overflow: auto;
  transition: all 300ms ease;
}

  Testing
  
one two three