Animated Input Labels with Pure CSS/CSS3

Preview:

Description:

CSS/CSS3 (SASS) based animated text labels floating above the input text field when the user starts typing, following the famous Float Label Pattern. Created by abergin.

This idea combines the best of both worlds with placeholder text and top aligned text. Only the placeholder text is showing by default, so there is a nice, clean and readable form. Once an input field is tapped and text is entered the placeholder text fades out and a top aligned label animates in. This way, with multiple fields a user won’t forget what an individual field represents.

How to use it:

The Html structure to create an Html form.

<form>
<h1>Fancy Text Inputs</h1>
<div class="question">
<input type="text" required/>
<label>First Name</label>
</div>
<div class="question">
<input type="text" required/>
<label>Last Name</label>
</div>
<div class="question">
<input type="text" required/>
<label>Email Address</label>
</div>
<div class="question">
<input type="text" required/>
<label>Email Confirm</label>
</div>
<button>Submit</button>
</form>

The CSS/CSS3 styles.

.transition,
form button,
form .question label,
form .question input[type="text"] {
-moz-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
-o-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
-webkit-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}
* {
font-family: Helvetica, sans-serif;
font-weight: light;
-webkit-font-smoothing: antialiased;
}
html {
background-color: #ff4a56;
}
form {
position: relative;
display: inline-block;
max-width: 700px;
min-width: 500px;
box-sizing: border-box;
padding: 30px 25px;
background-color: white;
border-radius: 40px;
margin: 40px 0;
left: 50%;
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
form h1 {
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
margin-left: 15px;
margin-bottom: 35px;
text-transform: uppercase;
}
form button {
margin-top: 35px;
background-color: white;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
display: inline-block;
box-sizing: border-box;
padding: 20px 15px;
border-radius: 60px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
form button:hover,
form button:focus {
color: white;
background-color: #ff4a56;
}
form .question {
position: relative;
padding: 10px 0;
}
form .question:first-of-type {
padding-top: 0;
}
form .question:last-of-type {
padding-bottom: 0;
}
form .question label {
transform-origin: left center;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
font-size: 17px;
box-sizing: border-box;
padding: 10px 15px;
display: block;
position: absolute;
margin-top: -40px;
z-index: 2;
pointer-events: none;
}
form .question input[type="text"] {
appearance: none;
background-color: none;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
width: 100%;
display: block;
box-sizing: border-box;
padding: 10px 15px;
border-radius: 60px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
form .question input[type="text"]:focus {
outline: none;
background: #ff4a56;
color: white;
margin-top: 30px;
}
form .question input[type="text"]:valid {
margin-top: 30px;
}
form .question input[type="text"]:focus ~ label {
-moz-transform: translate(0, -35px);
-ms-transform: translate(0, -35px);
-webkit-transform: translate(0, -35px);
transform: translate(0, -35px);
}
form .question input[type="text"]:valid ~ label {
text-transform: uppercase;
font-style: italic;
-moz-transform: translate(5px, -35px) scale(0.6);
-ms-transform: translate(5px, -35px) scale(0.6);
-webkit-transform: translate(5px, -35px) scale(0.6);
transform: translate(5px, -35px) scale(0.6);
}