Criando input com label flutuante usando apenas css

E ai pessoas, o post de hoje vou tirar uma dúvida que com certeza é ou já foi a dúvida de muitos…
Obs: essa não é a única nem a melhor maneira de fazer

O label flutuante no input serve para resolver uma questão de usabilidade pois se utilizarmos o input somente com o placeholder teremos um problema que considero sério: 
Imagine a situação comum em que o usuário começar a digitar num campo de texto por exemplo, o placeholder vai sumir ficando apenas o texto digitado no input. Se por algum acaso o usuário não estiver atento ou não tiver prestado atenção em que está digitando ele teria que apagar tudo que havia digitado para poder ver o que era aquele campo.

Um exemplo real de como ele vai funcionar:

Vamos criar a estrutura do nosso input:

estrutura

Agora o css:

css

O “pulo do gato” nesse exemplo é usar o :focus para quando o campo de texto estiver ativado(selecionado, tocado, clicado) o estilo vai ser adicionando na classe label-nome. Uma outra coisa importante também é a propriedade transition adicionada a classe label-nome para dar o efeito quando o label for subir.