Vuetify 처럼 BS form-group 에서 placeholder 애니메이션 주기

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-control-placeholder {
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;
  opacity: 0.5;
  color: red;
}


.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
  font-size: 75%;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
}

매우 잘 된다.

 

출처: stackoverflow.com/a/58736840

How to create an animated form placeholder using pure CSS