Textinput Animation

E-Mail

<form class="animated" >
  <input type="email" name="email" placeholder=" " value="" required>
  <label for="email">E-Mail</label>
</form>

     form.animated {
       width: 500px;
       font-family: arial;
     }
     form.animated * {
       width: 100%;
       height: 30px;
       display: block;
       border: 0;
     }
     .animated input, .animated input:invalid, .animated input:focus {
       margin-top: 30px;
       border-bottom: 3px solid #333;
       outline: none;
       box-shadow:none;
       padding: 0;
     }
     .animated input:invalid:-moz-placeholder {
         box-shadow:none !important;
     }
     .animated label {
       color: #333;
       transform: translatey(-30px);
       pointer-events: none;
       transition: all 0.3s ease;
     }
     .animated input:focus + label,
     .animated input:not(:placeholder-shown) + label {
       transform: translatey(-50px);
     }
     .animated input:not(:placeholder-shown){
     border-bottom: 3px solid red;
     }
     .animated input:not(:placeholder-shown) + label {
       color: red;
     }
     .animated input:valid + label{
       color: green;
     }
     .animated input:valid{
     border-bottom: 3px solid green;
     }