Анимировать один объект, когда другой сфокусирован

Question

У меня есть несколько разделов в форме. В каждом разделе есть индикатор того, на каком этапе находится пользователь. Я хочу, чтобы при фокусировке ввода внутри раздела на индикаторе начиналась анимация. Я не могу использовать: focus-inside, потому что сейчас он не является стандартом браузера.

Прямо сейчас я сохранил импульсную анимацию как эффект наведения, но я хотел бы, чтобы эта анимация запускалась, когда вход сфокусирован. Я думал об использовании JQuery, но сам не смог разобраться.

Любая помощь будет принята с благодарностью.

@keyframes pulse {
  0%,
  40% {
    box-shadow: 0 0 0 5px rgba(0, 109, 168, 0);
  }
  0% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0);
  }
}

#indicator {
  background-color: #006da8;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  padding: 0;
  margin-top: 15px;
  margin-bottom: 15px;
}

#indicator:hover {
  animation: pulse 2s ease infinite;
}

#indicator p {
  padding-top: 3px;
  margin: 5px;
  color: white;
  text-align: center;
}

input {
  display: block;
  margin: 10px 0 10px 0;
}


/* what i think i want to do? */

input:focus {
  /* somehow start indicator animation???
     Maybe use javascript? */
}

<form>

  <section>
    <div id="indicator">
      <p>1</p>
    </div>

    <input type="text" />
    <input type="email" />
    <input type="password" />
  </section>

  <section>
    <div id="indicator">
      <p>2</p>
    </div>

    <input type="text" />
    <input type="email" />
    <input type="password" />
  </section>

  <section>
    <div id="indicator">
      <p>3</p>
    </div>

    <input type="text" />
    <input type="email" />
    <input type="password" />
  </section>

</form>

Answer 1

Конвертировать каждый раздел во flexbox. Поместите .indicator после входов и используйте order: -1, чтобы переместить его наверх. Теперь вы можете использовать братский комбинатор input:focus~.indicator для вызова анимации.

@keyframes pulse {
  0%,
  40% {
    box-shadow: 0 0 0 5px rgba(0, 109, 168, 0);
  }
  0% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0);
  }
}

section {
  display: flex;
  flex-direction: column;
  width: 50vw;
}

section .indicator {
  order: -1;
}

.indicator {
  background-color: #006da8;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  margin-top: 15px;
  margin-bottom: 15px;
  color: white;
  text-align: center;
}

input {
  display: block;
  margin: 10px 0 10px 0;
}

input:focus~.indicator {
  animation: pulse 2s ease infinite;
}

<form>

  <section>
    <input type="text" />
    <input type="email" />
    <input type="password" />

    <div class="indicator">1</div>
  </section>

  <section>
    <input type="text" />
    <input type="email" />
    <input type="password" />

    <div class="indicator">2</div>
  </section>

  <section>
    <input type="text" />
    <input type="email" />
    <input type="password" />

    <div class="indicator">
      <p>3</p>
    </div>
  </section>

</form>

Answer 2

Итак, когда я изначально писал этот вопрос, я не включил важную деталь. В то время я не знал, что библиотека, которую я использовал, когда возникла эта проблема, автоматически оборачивает все входные данные в div. Я не могу удалить библиотеку, так как это жизненно важно для проекта. Так что я нашел способ сделать это и в jQuery, и подумал, что я надену его здесь, если кому-нибудь в будущем понадобится.

$(document).ready(function () {
    $('.inputAnimator').focus(function () {
        $(this).closest('.section').find('.numeral').addClass('pulseAnimator');
    });
    $('.inputAnimator').blur(function () {
        $(this).closest('.section').find('.numeral').removeClass('pulseAnimator');
    });
});

form {
  display: flex;
  flex-direction: column;
}

input {
  width: 100%;
  margin: 10px 0 ;
}

.numeral {
  width: 25px;
  height: 25px;
  
  border-radius: 50%;
  background-color: #006da8;
  
  line-height: 25px;
  color: white;
  text-align: center;
}

.pulseAnimator {
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0%,40% {
        box-shadow: 0 0 0 10px rgba(0, 109, 168, 0);
    }
    0% {
        box-shadow: 0 0 0 0px rgba(0, 109, 168, 0.5);
    }
    100% {
        box-shadow: 0 0 0 0px rgba(0, 109, 168, 0);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="section">
    <div class="numeral">1</div>
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="password" />
  </div>
  <hr />
  <div class="section">
    <div class="numeral">2</div>
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="password" />
  </div>
  <hr />
  <div class="section">
    <div class="numeral">3</div>
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="password" />
  </div>
</form>