<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Labels animados</title>
</head>
<body>

<h1 class="title">
    Labels animados
</h1>

<div class="item item1">
    <h3>Item 1</h3>
    <div class="wrapper">
        <label for="el1">Label</label>
        <input id="el1" type="text"/>
    </div>
</div>

<div class="item item2">
    <h3>Item 2</h3>
    <div class="wrapper">
        <label for="el2">Label</label>
        <input id="el2" type="text"/>
    </div>
</div>

<div class="item item3">
    <h3>Item 3</h3>
    <div class="wrapper">
        <label for="el3">Label</label>
        <input  id="el3" type="text"/>
    </div>
</div>

<div class="item item4">
    <h3>Item 4</h3>
    <div class="wrapper">
        <label for="el4">Label</label>
        <input  id="el4" type="text"/>
    </div>
</div>

<div class="item item5">
    <h3>Item 5</h3>
    <div class="wrapper">
        <label for="el5">Label</label>
        <input  id="el5" type="text"/>
    </div>
</div>

<div class="item item6">
    <h3>Item 6</h3>
    <div class="wrapper">
        <label for="el6">Label</label>
        <input  id="el6" type="text"/>
    </div>
</div>

<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
</body>
</html>
/* Ajustes generales a modo ilustrativo */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font: 16px/1 'Source Sans Pro', sans-serif;
    color: #555;
}

.title {
    text-align: center;
    margin: 20px 0 0;
}

.item {
    width: 300px;
    padding: 20px 0;
    margin: 0 auto;
}

.item:nth-child(odd) {
    background: none;
}

.item:last-child {
    border: 0;
}

h3 {
    margin-bottom: 20px;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    outline: 0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* FIN Ajustes generales a modo ilustrativo */

/* Ajustes especificos */
.wrapper {
    display: block;
    position: relative;
}

.wrapper input {
    width: 100%;
    color: black;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid black;
    transition: .1s all linear;
    padding: 10px 10px 12px 60px;
}

.wrapper label {
    position: absolute;
    top: 13px;
    left: 15px;
    font-size: 14px;
    color: black;
    transition: 300ms all linear;
    cursor: text;
}

/* Item 1 */
.item1 .wrapper.active input {
    padding-left: 45px;
}

.item1 .wrapper.active label {
    font-weight: bold;
    left: 6px;
    opacity: .5;
}

/* Item 2 */
.item2 .wrapper.active input {
    padding-left: 15px;
}

.item2 .wrapper.active label {
    font-weight: bold;
    top: -18px;
}

/* Item 3 */
.item3 .wrapper.active input {
    padding-left: 15px;
}

.item3 .wrapper.active label {
    font-size: 40px;
    font-weight: bold;
    opacity: .1;
    top: 0;
    left: 0;
}

/* Item 4 */
.item4 .wrapper.active input {
    padding-left: 70px;
}

.item4 .wrapper.active label {
    color: #fff;
    font-weight: bold;
    background: #ff8525;
    padding: 14px;
    top: 0;
    left: 0;
}

/* Item 5 */
.item5 .wrapper.active input {
    padding-left: 25px;
}

.item5 .wrapper.active label {
    font-weight: bold;
    font-size: 10px;
    transform: rotate(-90deg);
    top: 15px;
    left: 0;
}

/* Item 6 */
.item6 .wrapper.active input {
    padding-left: 15px;
}

.item6 .wrapper.active label {
    width: 100%;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    background: #ff8525;
    padding: 3px 5px;
    top: 39px;
    left: 0;
}

/* FIN Ajustes especificos */
$(document).ready(function () {
  $('input').each(function () {
    $(this).on('focus', function () {
      $(this).parent('.wrapper').addClass('active');
    });
    $(this).on('blur', function () {
      if ($(this).val().length === 0) {
        $(this).parent('.wrapper').removeClass('active');
      }
    });
    if ($(this).val() !== '') $(this).parent('.wrapper').addClass('active');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js