JSFiddle - React, Tailwind, and code Playground

HTML

<input class="has-animation" placeholder="I should blink on focus"/>
<input class="no-animation" placeholder="I should dissapear on focus"/>
<input class="input-animation" placeholder="Input should blink on focus"/>

SCSS

.has-animation {
  &:focus::placeholder {
    //opacity: 0;
    animation: blinkPlaceholder 2s ease-out -2s infinite alternate forwards;
  }

  @keyframes blinkPlaceholder {
    0% {
      opacity: 100;
    }

    49% {
      opacity: 100;
    }

    50% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }
}

.no-animation {
  &:focus::placeholder {
    opacity: 0;
  }
}

.input-animation {
  &:focus {
    //opacity: 0;
    animation: blinkPlaceholder 2s ease-out -2s infinite alternate forwards;
  }

  @keyframes blinkPlaceholder {
    0% {
      opacity: 100;
    }

    49% {
      opacity: 100;
    }

    50% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }
}