Как сделать анимацию что бы при нажатии на input, label поднимался а после введения текста не возвращался?

Для того чтобы реализовать такую анимацию в HTML, можно использовать язык стилей CSS в сочетании с небольшим кодом JavaScript. Вот пример того, как это можно сделать:

1. Первым шагом добавим стили для элементов. Создадим классы для анимации и определим с помощью CSS позицию отображения label.

<style>
  .input-container {
    position: relative;
    margin-bottom: 20px;
  }
  .input-container label {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease-out;
    transform-origin: 0% 0%;
    pointer-events: none;
    font-size: 14px;
    color: gray;
  }
  .input-container input:focus + label,
  .input-container input:not(:placeholder-shown) + label {
    transform: translateY(-20px) scale(0.8);
  }
  .input-container input:focus {
    /* опциональные стили для активного input */
  }
</style>

2. Теперь создадим структуру HTML с элементами input и label.

<div class="input-container">
  <input type="text" placeholder="" />
  <label>Введите текст</label>
</div>

3. Наконец, добавим небольшой фрагмент JavaScript для обработки события нажатия на input.

<script>
  const input = document.querySelector('input');
  input.addEventListener('focus', () => {
    input.placeholder = '';
  });
  input.addEventListener('blur', () => {
    input.placeholder = 'Введите текст';
  });
</script>

В этом фрагменте кода при фокусировке на input убирается текст-подсказка из атрибута placeholder, а при потере фокуса input-элементом восстанавливается текст-подсказка.

Таким образом, при нажатии на input, label будет подниматься с помощью анимации и оставаться в верхней позиции после введения текста, чтобы создать визуальный эффект.