.authentification{
	background:#fff;
	padding:10px;
	border-radius:10px;	
	width:350px;
	margin:70px auto;
	box-shadow: 1px 1px 12px #000;
	
}

.authentification .bodyAuthCard{
	text-align:center;
}

.authentification input {
	margin-top: 20px;
	margin-bottom:20px;
  display: block;
  border: 1px solid #e9e7e7;
  padding: 10px 5px;
  width:300px;
  color: #0e6252;
  text-align:center;
  background:#fff;
  
}
.authentification input:focus, .authentification input:valid {
  box-shadow: none;
  outline: none;
  background-position: 0 0;
}
.authentification input:focus::-webkit-input-placeholder, .authentification input:valid::-webkit-input-placeholder {
  color: #1abc9c;
  font-size: 11px;
  
}

.authentification button[type="submit"] {
  border: none;
  background: #C40447;
  cursor: pointer;
  border-radius: 3px;
  padding: 6px;
  width: 300px;
  color: white;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
  margin-top:20px;
  margin-bottom:20px;
}
.authentification button[type="submit"]:hover {
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
}
 
The magic happens in a few lines of code for the input:focus and input:valid. The CSS transform property plays a crucial role to achieve this little instant feedback effect.

.authentification input:focus::-webkit-input-placeholder, .authentification input:valid::-webkit-input-placeholder {
  color: #1abc9c;
  font-size: 11px;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  visibility: visible !important;
}

.authentification .formMessage{text-align:center; font-weight:bold; color:#C40447}

.authentification .card-body{ text-align:center}