Animated placeholder

Question

ola found that answer https://jsfiddle.net/2a1kvcn6/1/ however I cannot keep the placeholder as title, once I type something it disappears, this way the box is without identification

.inputAnimado{
  margin: 10px 25px;
  width: 200px;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px #1abc9c;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background-position: -200px 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  color: #0e6252;
}

.inputAnimado:focus, .inputAnimado:valid {
 box-shadow: none;
 outline: none;
 background-position: 0 0;
}

.inputAnimado::-webkit-input-placeholder {
 font-family: 'roboto', sans-serif;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.inputAnimado:focus::-webkit-input-placeholder, .inputAnimado:valid::-webkit-input-placeholder {
 color: #1abc9c;
 font-size: 11px;
 -webkit-transform: translateY(-20px);
 transform: translateY(-20px);
 visibility: visible !important;
}

<input type="text" placeholder="Não quero sumir ao digitar" class="inputAnimado" required>

Answer 1

I believe using the placeholder there is no way to do due to its standard functioning, which is to disappear when the length of the value of the input is greater than zero. A way not so simple, but nothing complex, is to position the label concerning the input on the same, simulating the placeholder and when the input receive the focus move the label up in the title position.

Take an example:

$(() => {

  $("input").on("focus", function(event) {
    const div = $(this).parent(".input-field");
    const label = div.children("label");
    
    label.css("top", "-10px");
  });
  
  $("input").on("blur", function(event) {
    const div = $(this).parent(".input-field");
    const label = div.children("label");
    
    if ($(this).val().length == 0) {
      label.css("top", "12px");
    }
  });

});

.input-field {
  position: relative;
  margin-bottom: 40px;
}

.input-field input {
  margin: 10px 0;
  width: 200px;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px #1abc9c;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background-position: -200px 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  color: #0e6252;
}

.input-field input:focus {
  box-shadow: none;
  outline: none;
  background-position: 0 0;
}

.input-field label {
  color: #9e9e9e;
  font-size: 12px;
  position: absolute;
  top: 12px;
  transition: .2s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field">
  <input id="name" type="text" class="validate">
  <label for="name">Nome</label>
</div>

<div class="input-field">
  <input id="lastname" type="text" class="validate">
  <label for="lastname">Sobrenome</label>
</div>

<div class="input-field">
  <input id="email" type="text" class="validate">
  <label for="email">E-mail</label>
</div>

Answer 2

Your CSS code is correct, what is missing is the tag required in the HTML of your input,according to the example to happen the animation it is needed. Your code will look like this:

<input class="inputAnimado" type="text" placeholder="Vou sumir ao digitar" required>

Now if you want it to work in all cases, regardless of the required or not, you should change your CSS. Remove the .inputAnimado:valid::-webkit-input-placeholder :

.inputAnimado:focus::-webkit-input-placeholder {
    color: #1abc9c;
    font-size: 11px;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    visibility: visible !important;
 }

What happens is that the :valid is used to validate according to tag type HTML, as without the required your text field is always valid it will not enter and exit the animation, will always be excited. Removing the :valid animation will only depend on the :focus, that is, it will only be activated when there is interaction with that field.