How to Make Placeholder and Label Transitions

Move label in placeholder CSS

i hope this is what you need. but there is a problem when you unfocused input.

i just make little changes in HTML.

.field{  position: relative;}
label {  position: absolute;  pointer-events: none;  left: 10px;  top: 2px;  transition: 0.2s ease all;  font-size: 15px;}input:focus ~ label{  top:-10px;  font-size:12px;}

<div class="field"> <input type="text" class="input-text">  <label>First Name</label></div>

How to move placeholder to top on focus AND while typing?

You could do it like this

HTML:

<div>
  <input type="text" class="inputText" />
  <span class="floating-label">Your email address</span>
</div>

CSS:

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 8px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}

Working JSFiddle here https://jsfiddle.net/273ntk5s/2/

Add a padding to placeholder when label also inside input

The placeholder text will always sit in the center within an input. To achieve more spacing between the label and the placeholder text, what you would need to do is that you add a padding-top value which is greater than padding-bottom of your input. I have set 20px and 10px respectively which would effectively increase the spacing b/w label and placeholder by 5px.

.form-control {
  width: 320px;  
  font-family: Verdana, sans-serif;
  position: relative;
}

.form-control input {
  display: block;
  outline: none;
  width: 100%;
  background: #fff;
  border: 2px solid #fcc;
  padding: 20px 15px 10px;
  font-size: 24px;
  color: #500;
  font-family: inherit;
  cursor: pointer;
}

.form-control label {
  cursor: pointer;
  display: block;
  position: absolute;
  left: 15px;
  top: 18px;
  color: #aaa;
  font-size: 20px;
  -webkit-transition: .2s;
  transition: .2s;
}

.form-control input:valid + label,
.form-control input:focus + label {
  top: 0;
  font-size: 14px;
}

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="form-control">
    <input type="text" id="login" required>
    <label for="login">Login</label>
  </div>
</body>
</html>

Firefox + Edge input placeholder opacity transition

Since there is no real cross browser solution to style and animate placeholder's, I decided to post an updated version from another answer of mine, where this one having both a label, a placeholder and a required asterisk.

I have added a tiny script with one purpose only, to replicate what is written in an input field to its attribute value.

With that, one can then use CSS alone for the actual styling and animations, by simply use the attribute selector [attribute="value"] (in the way I think most users expect it to be used)

(function(pls) {  /* run this script when page loaded */  window.addEventListener('load', function() {    /* find and iterate all "input placeholder" elements */    pls = document.querySelectorAll('.placeholder input');    for (var i = 0; i < pls.length; i++) {      /* attach a handler to replicate input value */      pls[i].addEventListener('input', function() {        this.setAttribute('value', this.value);      })    }  })})();

.placeholder {  position: relative;  padding-top: 15px;}.placeholder + .placeholder {  margin-top: 10px;}.placeholder label {  position: absolute;  left: 5px;  width: 100%;  top: calc(50.5% + 7.5px);  transform: translateY(-50.5%);  pointer-events: none;  font-size: 16px;  line-height: 16px;}.placeholder label::before,.placeholder label span {    position: relative;  top: 0;  transition: top .5s;}
/* the label text + asterisk */.placeholder input + label::before {  content: attr(data-text) ' ';   color: black;}.placeholder label span {  color: red;}.placeholder input:not([required]) + label span {  display: none;}.placeholder input:not([value=""]) + label::before,.placeholder input:focus + label::before,.placeholder input:not([value=""]) + label span,.placeholder input:focus + label span {  top: -22px;}
/* the placeholder text */.placeholder input + label::after {  content: attr(data-placeholder);   position: absolute;  left: 0; top: 0;  color: gray;  opacity: 0;  transition: opacity .5s .2s;}.placeholder input:focus + label::after {  opacity:  1;}.placeholder input:not([value=""]) + label::after {  opacity:  0;  transition: opacity .2s;}

<div class="placeholder">  <input type="text" name="name" value="">  <label data-text="Name" data-placeholder="Add your name"><span>*</span></label></div><div class="placeholder">  <input type="text" name="mail" value="" required>  <label data-text="Email" data-placeholder="Add your email address"><span>*</span></label></div>

How to create an animated form placeholder using pure CSS

Your code is pretty close to the desired approach!

But there are minor things you just need adjust to make it work;

First, delete <div> wrapper outside of <input> make them adjacent

switch the <input> and <label> so .class:focus/valid + .class CSS selector can work.
the reason is because the way your wrote the + is referring to the next adjacent element.

then add required="required" to your <input> in order to use CSS :valid.

That's it! cheers. The following code snippet is just the changes based on your own code.

.form-group {  position: relative;  margin-bottom: 1.5rem;}
.form-control-placeholder {  position: absolute;  top: 0;  padding: 7px 0 0 13px;  transition: all 200ms;  opacity: 0.5;  color: red;}
.form-control:focus + .form-control-placeholder,.form-control:valid + .form-control-placeholder {  font-size: 75%;  transform: translate3d(0, -100%, 0);  opacity: 1;}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class='container m-5'><form class="form" _lpchecked="1">  <div role="group" class="form-group">    <input id="year" name="year" type="text" class="form-control" required="required">    <label for="year" class="d-block form-control-placeholder" required="required">Year</label>  </div></form>  </div

Move placeholder above the input on focus

You can use the CSS pseudo-selector :placeholder-shown in this case to detect when to move a fake placeholder out of the way. See example below:

label {  margin:20px 0;  position:relative;  display:inline-block;}  span {  padding:10px;  pointer-events: none;  position:absolute;  left:0;  top:0;  transition: 0.2s;  transition-timing-function: ease;  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);  opacity:0.5;}
input {  padding:10px;}
input:focus + span, input:not(:placeholder-shown) + span {  opacity:1;  transform: scale(0.75) translateY(-100%) translateX(-30px);}
/* For IE Browsers*/input:focus + span, input:not(:-ms-input-placeholder) + span {  opacity:1;  transform: scale(0.75) translateY(-100%) translateX(-30px);}

<label>  <input placeholder=" ">  <span>Placeholder Text</span></label>