floating label

index.html

  <div class="float-label-form">
    <div class="form-group">
      <input type="text" class="form-control input-animation" ng-model="adventureCtrl.adventure.name" id="name" name="name" placeholder="Adventure Name*" maxlength="255" required/>
      <label for="name" ng-show='adventureCtrl.adventure.name'>Adventure Name*</label>
      <input-line-animation></input-line-animation>
      <p class='form-error' ng-show='adventureCtrl.nameError'>There's already an adventure with this name.</p>
    </div>
  </div>

index.scss

.float-label-form, .float-label-form-regular {
  .form-group {
    position: relative;
    padding-top: 14px;

    input, textarea {
      display: block;
      width: 100%;
      border: 0;
      outline: 0;
      resize: none;
      
      // inactive but shown label (exceptions: opacity and top)
      & + label {
        position: absolute;
        top: 10px;
        left: 12px;
        transition: top 0.7s ease, opacity 0.7s ease;
        opacity: 0;
        font-weight: 400;
        
        // Some nice styling
        // font-size: @label-font-size;
        color: #ccc;
      }
      
      // THE MAGIC
      // as soon as we start typing, the "required" attribute will
      // set the state to valid and our pseudo selector will match
      &:valid + label, &.ng-valid-required + label {
        opacity: 1;
        top: 0px;
      }
      
      // and we highlight the focused input label
      &:focus + label {
        color: $orangeDefault;
      }
    }    
  }
}

.float-label-form {
  .form-group {
    float: left;
    width: 100%;
    // border-bottom: @border;
    // padding-bottom: 10px;

    &.form-group-large {
      padding-top: 33px;
    }
    
    // you proably want to replace these with your grid classes
    &.small {
      width: 30%;
      // border-right: @border;
    }
    
    &.medium {
      width: 70%;
      // padding-left: @padding;
    }
    
    &:last-child {
     border: 0;
    }
  }
}


.input-animation {
  border: 0px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: transparent;  

  &:focus {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;

      &~.content-line {
        .line-border-focus {
          @include _animation(0.1s, 0.2s, inputLineBorderAnimation);
        }
      }
  }  
}

input-line-animation.htm

<div class="content-line">
    <div class="line line-border"></div>
    <div class="line line-border-focus"></div>
</div>

input-line-animation.js

(function(window, angular){
    'use strict';
    

    angular.module('geoBackOfficeApp.directives')
        .directive('inputLineAnimation', inputLineAnimation);

    inputLineAnimation.$inject = [

    ];

    function inputLineAnimation () {

        return {
            replace: true,
            templateUrl: templateDirectiveUrl('input-line-animation/input-line-animation'),
            scope: {},
            link:function(ng, elem, attrs){

            }
        }
    }       

}(window, angular));

input-line-animation.scss

.content-line {
	position: relative;

	.line {
		position: absolute;
		top: 1px;
	}

	.line-border {
	    height: 2px;
	    width: 100%;
	    background-color: rgba(0,0,0,0.12);			
	    z-index: 1;
	}

	.line-border-focus {
	    height: 2px;
	    width: 0;
	    margin: 0 auto;
	    background-color: red;
	    z-index: 2;
	}	
}

mixins.scss

@mixin _animation ($delay, $duration, $animation) {
    -webkit-animation-delay: $delay;
    -webkit-animation-duration: $duration;
    -webkit-animation-name: $animation;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: $delay;
    -moz-animation-duration: $duration;
    -moz-animation-name: $animation;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: $delay;
    -o-animation-duration: $duration;
    -o-animation-name: $animation;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: $delay;
    animation-duration: $duration;
    animation-name: $animation;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

@mixin _keyframe ($animation_name) {
    @-webkit-keyframes #{$animation_name} {
        @content;
    }

    @-moz-keyframes #{$animation_name} {
        @content;
    }

    @-o-keyframes #{$animation_name} {
        @content;
    }

    @keyframes #{$animation_name} {
        @content;
    }
}


@include _keyframe(inputLineBorderAnimation) {
  0%   {
  	width: 0%;
  	left: 50%;
  }
  25% {
  	width: 25%;
  	left: 37.5%;
  }
  50% {
  	width: 50%;
  	left: 25%;
  }
  75% {
  	width: 75%;
  	left: 12.5%;
  }
  100% {
  	width: 100%;
  	left: 0%;	
  }	
}