<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6 col-offset-2"> <div class="text-input"> <input type="text" id="input1" placeholder="Click me to see the animation!"> <label for="input1">Email</label> </div> </div> </div> </div>

body{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: Montserrat; background: #fff1f0; } .text-input{ position: relative; margin-top: 50px; } input[type="text"]{ display: inline-block; width: 500px; height: 40px; box-sizing: border-box; outline: none; border: 1px solid lightgray; border-radius: 3px; padding: 10px 10px 10px 100px; transition: all 0.1s ease-out; } input[type="text"] + label{ position: absolute; top: 0; left: 0; bottom: 0; height: 40px; line-height: 40px; color: white; border-radius: 3px 0 0 3px; padding: 0 20px; background: #fa8072; transform: translateZ(0) translateX(0); transition: all 0.3s ease-in; transition-delay: 0.2s; } input[type="text"]:focus + label{ transform: translateY(-120%) translateX(0%); border-radius: 3px; transition: all 0.1s ease-out; } input[type="text"]:focus{ padding: 10px; transition: all 0.3s ease-out; transition-delay: 0.2s; }