amorey/input-animation-example.html

## input-animation-example.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- load MUI -->
    <link href="//cdn.muicss.com/mui-0.1.4/css/mui.min.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.muicss.com/mui-0.1.4/js/mui.min.js"></script>
    <!-- custom css -->
    <style>
      .bar {
        position: relative;
        display: block;
      }

      .bar:before,
      .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #2196F3;
        transition: 0.2s ease all;
      }

      .bar:before {
        left: 50%;
      }

      .bar:after {
        right: 50%;
      }

      .mui-form-control:focus {
        border-color: transparent;
      }

      .mui-form-control:focus ~ .bar:before,
      .mui-form-control:focus ~ .bar:after {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <form>
      <div class="mui-form-group">
        <input type="text" class="mui-form-control">
        <label class="mui-form-floating-label">Name</label>
        <span class="bar"></span>
      </div>
    </form>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- load MUI -->
	<link href="//cdn.muicss.com/mui-0.1.4/css/mui.min.css" rel="stylesheet" type="text/css" />
	<script src="//cdn.muicss.com/mui-0.1.4/js/mui.min.js"></script>
	<!-- custom css -->
	<style>
	.bar {
	position: relative;
	display: block;
	}

	.bar:before,
	.bar:after {
	content: '';
	height: 2px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #2196F3;
	transition: 0.2s ease all;
	}

	.bar:before {
	left: 50%;
	}

	.bar:after {
	right: 50%;
	}

	.mui-form-control:focus {
	border-color: transparent;
	}

	.mui-form-control:focus ~ .bar:before,
	.mui-form-control:focus ~ .bar:after {
	width: 50%;
	}
	</style>
	</head>
	<body>
	<form>
	<div class="mui-form-group">
	<input type="text" class="mui-form-control">
	<label class="mui-form-floating-label">Name</label>
	<span class="bar"></span>
	</div>
	</form>
	</body>
	</html>