CSS Animated Form Label

From follow Andrew youtube

by Glynne Turner

HTML

<div class="container">
  <form action="#" method="POST" class="form">
  <div class="form-group">
  <input type="text" class="form-control" placeholder="Name" id="Name" name="Name" />
  <label for="Name" class="form-label">Your Name</label>
  </div>
  
  <div class="form-group">
  <input type="email" class="form-control" placeholder="Email" id="Email" name="Email" />
  <label for="Email" class="form-label">Your Email Address</label>
  </div>
  
  <div class="form-group">
  <input type="textarea" class="form-control" placeholder="Your message" id="Message" name="Message"></textarea>  
  <label for="Message" class="form-label">Your message</label>
  </div>
  </form>
</div>

CSS

body{
  display: flex;
  justify-content: center;
  align-items:center;
  height: 100vh;
  background-color: #e5e5e5; 
}

.container{
  width: 80vw;
  box-shadow: 0 15px 35px (50,50,93,0.1);
  padding:2em;
  background-color:#ffffff;
  border-radius:5px;
}

.form-group{
  margin-bottom:1em;
  transition:all .3s;
  
}

.form-label{
  font-size:1em;
  color:#aaa;
  display:block;
  opacity:1;
  transform: translateY(-1.25em);
  transform-origin: 0 0;
  transition:all .3s;
}

.form-control{
  box-shadow: none; 
  border-radius: 0;
  border-color: #ccc;
  border-style : none none solid none;
  width: 100%;
  transition: all .3s;
  padding:5px;
}

.form-control::placeholder{
  color: transparent; 
}


.form-control:focus{
  box-shadow:none;
  outline:none;
  border-color:red; 
}

.form-control:focus + .form-label , .form-control:not(:placeholder-shown) + .form-label{
  transform: translateY(-2.5em) scale(0.8);
  transition:all .3;
  
}
 
.form-group:focus-within{ 
}