Playing with form field css animation

Introduction

Trying to reproduce the same animation as the one in the Angular Material form field

Html

<div style="width: 100%; display: flex; flex-direction: row; gap: 0.5rem">
    <div class="formField">
    <label
        class="formLabel"
        [text]="'Width'"
        [class.formLabelFilled]="
        formGroup.get('width').value || formGroup.get('width').value === 0
        "
    />
    <input
        class="formInput"
        formControlName="width"
        [style.column-span]="1"
    />
    </div>
    <div class="formField">
    <label
        class="formLabel"
        [text]="'Height'"
        [class.formLabelFilled]="
        formGroup.get('height').value || formGroup.get('height').value === 0
        "
    />
    <input
        class="formInput"
        formControlName="height"
        [style.column-span]="1"
    />
    </div>
</div>

Css

$primary-color-accent: red;
$primary-color-text: white;

.formField {
  min-height: 23px;
  padding-top: 23px;
  position: relative;
  box-sizing: border-box;

  &:focus-within {
    .formLabel {
      font-size: 12px;
      transform: translateY(-100%);
      color: var(--primary-color-accent);
      opacity: 1;
    }
  }

  .formLabelFilled {
    transform: translateY(-100%);
    font-size: 12px;
    color: var(--primary-color-text);
    opacity: 0.7;
  }
}

.formLabel {
  display: var(--mat-form-field-filled-label-display, block);
  z-index: 10;
  position: absolute;
  transition:
    transform 0.15s cubic-bezier(0, 0.76, 0.42, 0.82),
    font-size 0.15s cubic-bezier(0, 0.76, 0.42, 0.82),
    color 0.15s cubic-bezier(0, 0.76, 0.42, 0.82),
    opacity 0.05s cubic-bezier(0, 0.76, 0.42, 0.82);
}

.formInput {
  height: 100%;
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--primary-color-text);
  opacity: 1;
}

Demo

Title