Input animation with CSS and HTML - html

Question

I`m trying to make an animation in CSS, in which I have an INPUT (text) and a Label, This label has a text. When the user clicks the Input, I want the text from the label to go up, above the input.
.tpinput{
width: 50%;
display: block;
margin-top: 25px;
margin-left: -20px;
padding: 7px;
font-size: 15px;
color: black;
outline: none;
background: transparent;
border: none;
border-bottom: 1px solid #0043FF;
}
.tplabel{
position: relative;
margin-left: -25px;
top: -75px;
transition: 0.4s ease;
color: #0043FF;
}
.cadastro input:focus + .tplabel {
top: -70px;
font-size: 18pt;
left: -10px;
}
<div class="alinhamento">
<h1 id="cadtitulo">Cadastro</br></h1>
<form action="includes/signup.inc.php" method="POST">
<div class="cadastro">
<input type="text" id="nomecomp" name="nomecomp" class="tpinput" required/>
</br>
<label for="nomecomp" class="tplabel"><span class="content-name">Nome Completo</span></label>
<input type="text" class="tpinput1" id="signup-nome" name="nome" required/>
<label for="signup-nome" class="tplabel1"><span class="content-name">Username</span></label>
</br>
<input type="email" id="signup-email" name="email" class="tpinput2" required/>
<label for="signup-email" class="tplabel2"><span class="content-name">Email</span></label>
</br>
<input type="password" id="signup-password" name="snh" class="tpinput3"required/>
<label for="signup-password" class="tplabel3"><span class="content-name">Senha</span></label>
</br>
<input type="password" id="signup-password1" name="snh-repetir" class="tpinput4"required/>
<label for="signup-password1" class="tplabel4"><span class="content-name">Repetir senha</span></label>
</br>
<input type="tel" id="telefone" name="telefone" class="tpinput5" maxlength="13" required/>
<label for="telefone" class="tplabel5"><span class="content-name">Telefone</span></label>
</br>
<input type="text" id="chave" name="chave" class="tpinput6" required/>
<label for="chave" class="tplabel6"><span class="content-name">Key</span></label>
</br>
<button type="submit" class="btn-register" name="registrar">Registrar</button>
</div>
</form>
</div>
I want it to work for all the other labels too.