como fazer placeholder que vira label

1<div class="label-float">
2  <input type="text" placeholder=" " />
3  <label>Telefone</label>
4</div>
5<br/>
6<div class="label-float">
7  <input type="text" placeholder=" " required/>
8  <label>Nome de Usuário</label>
9</div>

1.label-float {
2  position: relative;
3  padding-top: 13px;
4}
5
6.label-float input {
7  border: 1px solid lightgrey;
8  border-radius: 5px;
9  outline: none;
10  min-width: 250px;
11  padding: 15px 20px;
12  font-size: 16px;
13  transition: all .1s linear;
14  -webkit-transition: all .1s linear;
15  -moz-transition: all .1s linear;
16  -webkit-appearance: none;
17}
18
19.label-float input:focus {
20  border: 2px solid #3951b2;
21}
22
23.label-float input::placeholder {
24  color: transparent;
25}
26
27.label-float label {
28  pointer-events: none;
29  position: absolute;
30  top: calc(50% - 8px);
31  left: 15px;
32  transition: all .1s linear;
33  -webkit-transition: all .1s linear;
34  -moz-transition: all .1s linear;
35  background-color: white;
36  padding: 5px;
37  box-sizing: border-box;
38}
39
40.label-float input:required:invalid+label {
41  color: red;
42}
43
44.label-float input:focus:required:invalid {
45  border: 2px solid red;
46}
47
48.label-float input:required:invalid+label:before {
49  content: '*';
50}
51
52.label-float input:focus+label,
53.label-float input:not(:placeholder-shown)+label {
54  font-size: 13px;
55  top: 0;
56  color: #3951b2;
57}