Animowany focus dla input w Bootstrap

Witam serdecznie,
Mam taki html

<div class="col-12 col-lg-4 box3 d-flex flex-column justify-content-between align-items-center">
                    <div class="d-flex justify-content-between">
                        <div class="boxes-caption-text d-inline-block">
                            Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque
                        </div>
                        <div class="boxes-caption-number d-inline-block text-right">
                            <div class="border-top border-3 w-50 d-inline-block pt-2">03</div>
                        </div>
                    </div>
                    <div class="boxes-title text-center">Baza wiedzy
                        <div class="pt-3 boxes-search-box-btn">
                            <img src="{{ asset('img/magnifier.png') }}" alt="" class="boxes-show-search-ico">
                        </div>
                        <div class="pt-3 boxes-search-box">
                            <div class="input-group">
                                <input type="text" class="form-control text-center px-md-5 mt-2"
                                       placeholder="Czego szukasz">
                                <img src="{{ asset('img/magnifier.png') }}" alt="" class="boxes-show-search-ico pb-3">
                            </div>
                        </div>
                    </div>
                    <div class="boxes-arrow mb-5"></div>
                </div>

Oraz CSS:

    .boxes .box3 {
      background-position: center;
      background-size: cover;
      background-image: url("/img/slide3.jpg");
      color: white;
      height: 872px;
    }
    
    .boxes-scan {
      font-size: 15px;
      width: 290px;
    }
    
    @media (min-width: 1200px) {
      .boxes-scan {
        width: 370px;
      }
    }
    
    .boxes-caption-text {
      font-size: 16px;
      padding: 20px 0 0 20px;
      width: 60%;
    }
    
    @media (min-width: 576px) {
      .boxes-caption-text {
        width: 70%;
      }
    }
    
    @media (min-width: 1200px) {
      .boxes-caption-text {
        width: 45%;
        padding: 50px 0 0 50px;
      }
    }
    
    .boxes-search-box {
      border-bottom: 2px solid white;
    }
    
    .boxes-caption-number {
      font-size: 16px;
      width: 30%;
      padding: 20px 20px 0 0;
    }
    
    @media (min-width: 576px) {
      .boxes-caption-number {
        width: 20%;
      }
    }
    
    @media (min-width: 1200px) {
      .boxes-caption-number {
        width: 50%;
        padding: 50px 50px 0 0;
      }
    }
    
    .boxes-title {
      font-size: 30px;
      font-weight: 800;
      text-transform: uppercase;
    }
    
    @media (min-width: 1200px) {
      .boxes-title {
        font-size: 35px;
      }
    }
    
    .boxes-title .form-control::placeholder {
      color: white;
      opacity: 1;
    }
    
    .boxes-title .form-control:-ms-input-placeholder {
      color: white;
    }
    
    .boxes-title .form-control::-ms-input-placeholder {
      color: white;
    }
    
    .boxes-title .form-control {
      border-bottom: 0 solid transparent;
    }
    
    .boxes-title .form-control:focus {
      color: white;
    }
    
    .boxes-title input {
      font-size: 21px;
      color: white;
      padding-bottom: 30px;
    }
    
    .boxes-arrow {
      width: 55px;
      height: 13px;
      background-image: url("/img/white-arrow.png");
    }
    
    .boxes-show-search-ico {
      cursor: pointer;
    }
    
    .boxes .border-3 {
      border-width: 3px !important;
    }
    
    
    
    .boxes .box3 {
      background-position: center;
      background-size: cover;
      background-image: url("/img/slide3.jpg");
      color: white;
      height: 872px;
    }
    
    .boxes-scan {
      font-size: 15px;
      width: 290px;
    }
    
    @media (min-width: 1200px) {
      .boxes-scan {
        width: 370px;
      }
    }
    
    .boxes-caption-text {
      font-size: 16px;
      padding: 20px 0 0 20px;
      width: 60%;
    }
    
    @media (min-width: 576px) {
      .boxes-caption-text {
        width: 70%;
      }
    }
    
    @media (min-width: 1200px) {
      .boxes-caption-text {
        width: 45%;
        padding: 50px 0 0 50px;
      }
    }
    
    .boxes-search-box {
      border-bottom: 2px solid white;
    }
    
    .boxes-caption-number {
      font-size: 16px;
      width: 30%;
      padding: 20px 20px 0 0;
    }
    
    @media (min-width: 576px) {
      .boxes-caption-number {
        width: 20%;
      }
    }
    
    @media (min-width: 1200px) {
      .boxes-caption-number {
        width: 50%;
        padding: 50px 50px 0 0;
      }
    }
    
    .boxes-title {
      font-size: 30px;
      font-weight: 800;
      text-transform: uppercase;
    }
    
    @media (min-width: 1200px) {
      .boxes-title {
        font-size: 35px;
      }
    }
    
    .boxes-title .form-control::placeholder {
      color: white;
      opacity: 1;
    }
    
    .boxes-title .form-control:-ms-input-placeholder {
      color: white;
    }
    
    .boxes-title .form-control::-ms-input-placeholder {
      color: white;
    }
    
    .boxes-title .form-control {
      border-bottom: 0 solid transparent;
    }
    
    .boxes-title .form-control:focus {
      color: white;
    }
    
    .boxes-title input {
      font-size: 21px;
      color: white;
      padding-bottom: 30px;
    }
    
    .boxes-arrow {
      width: 55px;
      height: 13px;
      background-image: url("/img/white-arrow.png");
    }
    
    .boxes-show-search-ico {
      cursor: pointer;
    }
    
    .boxes .border-3 {
      border-width: 3px !important;
    }

Aktualny podgląd: https://ibb.co/wB4qht5

Mam mały problem z inputem.
Chciałbym zrobić animację po kliknięciu na input (focus) tak żeby napis "czego szukasz" podszedł do góry.

Chodzi mi o coś takiego jak tutaj: https://cutt.ly/Sg6bCs1 (imie, nazwisko, numer telefonu itp).

W jaki sposób mogę to zrobić?

Bardzo proszę o pomoc.

Ustawiasz sobie transitionsi odpowiedni wygląd css dla element i element:focus.
W efekcie otrzymasz animowane przejście pomiędzy wyglądem zafokusowanym i niezafokusowanym.
Zobacz przykłady: https://www.w3schools.com/css/css3_transitions.asp

@Anna Lisik:

Bardzo ciekawe, testowałaś Ty woigóle co napisałaś czy tak po prostu piszesz dla powiększenia licznika sobie?

Proszę:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Anna Lisik to miła dziewczyna :)</title>

<style>
INPUT {
  box-sizing: border-box;
  width:300px;
  height:30px;
  padding-left:10px;
  transition: padding 2s;
}

INPUT:focus {
  padding-left:100px;
}
</style>
</head>
<body>

<input value="Anna Lisik to miła dziewczyna :)">

</body>
</html>