How do you make Placeholder and Label Transitions?

Question

I am looking to find an example of how to make a label / placeholder transition move up and out of placeholder position into a label position and vice versa..

Exam

Answer 1

General sibling selectors & :focus does the trick in a very simple way ;)

input{
 position:absolute;
 top:20px;
}
input ~ span{
 transition:top .7s ease;
 position:absolute;
 top:20px;
}
input:focus ~ span{
 top:0px;
}

Text

here is an example with multiple fields

https://jsfiddle.net/shLe3107/1/

hope this is enough else just ask