TextField css: How can I get a text field to animate when another function updates it's value through state change?

Category

[ ] Enhancement

[ ] Bug

[ x ] Question

Version

"@pnp/spfx-controls-react": "1.16.0"

Expected / Desired Behavior / Question

My scenario:
I have a list of projects on my web part (using ListView control).
When I click on one of the list items, I want it to update some text fields (via changing the state).
When it auto-populates the field, I want to highlight to the user what fields changed.

I found an example of how to do this through css here

My 2 questions are:

1. Currently, I can get it to "highlight/blink" on page load and then fades (desired effect) but I want to have it do that only when I update the text field through my callback function, not on page load.

2. With the current css class, it highlights the TextField label, not the value/box. I would like it to highlight the box. I assume this is just finding the css syntax to apply it to a sibling/child element somehow?

Observed Behavior

1. Styling flashes/blinks on page load and I only want it to change when I call my function to update the state of a field.

2. I want it to highlight the value box, not the label.

Steps to Reproduce

Code I have for building the TextField

NOTE that the callback function I am using to pre-populate the field is not the one I'm passing in here as onChanged={ updateField }.... The function that is setting the value of the text field is in my main react component class.

 export function createBasicTextField(field: IFieldDef, currentValue, updateField){
   // it is possible to have an option to hide labels in lue of placeholder text for more compressed look
   let placeHolder = 'Enter ' + field.title;
   placeHolder = '';
    let textField = 
    <TextField
      className={ [styles.textField,styles.highlightBlink].join(' ') }
      defaultValue={ currentValue ? currentValue : "" }
      label={field.title}
      disabled={field.disabled}
      placeholder={ placeHolder }
      autoComplete='off'
      onChanged={ updateField }
      required={field.required}
    />;
    
    return textField;
  }

CSS classNames I'm injecting into className of TextField

  .textField {
    display: table-cell;
    width: 100%;

    input {
      height: 32px;
      min-width: 80px;
    }
  }

  .highlightBlink {
    position: relative;
    animation-name: slide;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
  }

  @keyframes slide {
    0% {
      background-color: white;
    }
    50% {
      background-color: lightgrey;
    }
    100% {
      background-color: white;
    }
  }

Start with the supplied TextField JSX and the highlightBlink CSS, then inspect how the TextField component applies className to its label and input. Reproduce the behavior with @pnp/spfx-controls-react 1.16.0 and determine whether the animation can be triggered only after a state update and target the value box rather than the label.