Добавление анимации для изменения фокуса с помощью клавиши tab

Я собираюсь создать страницу прокрутки со многими входами (некоторые мастера). Мне нужен какой-то CSS трюк для анимации прокрутки (что-то вроде перехода, но переход не работает), когда пользователь нажимает клавишу Tab. Как мы знаем, он меняет фокус на следующий элемент и при необходимости прокручивает. Он работает отлично, но я хочу добавить анимацию. Теперь он прыгает, как вы можете видеть ниже. Возможно ли это?

.foo {
  height: 50px;
}
<ul style="height:70px; overflow:auto">
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>
  <li class="foo">
    <input type="text">
  </li>

</ul>

Подробная информация:

Я знаю решения с анимированными js, переходами и т. д.. Но это не анимация, когда вы все еще используете клавишу tab.

1 ответ

  1. Пожалуйста, проверьте, если вам нужно что-то подобное..

    .foo {
      height: 50px;
    }
    
    input[type=text], textarea {
      -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      -o-transition: all 0.30s ease-in-out;
      outline: none;
      padding: 3px 0px 3px 3px;
      margin: 5px 1px 3px 0px;
      border: 1px solid #DDDDDD;
    }
     
    input[type=text]:focus, textarea:focus {
      box-shadow: 0 0 5px rgba(81, 203, 238, 1);
      padding: 3px 0px 3px 3px;
      margin: 5px 1px 3px 0px;
      border: 1px solid rgba(81, 203, 238, 1);
    }
    <ul style="height:70px; overflow:auto">
      <li class="foo">
        <input type="text">
      </li>
      <li class="foo">
        <input type="text">
      </li>
      <li class="foo">
        <input type="text">
      </li>
      <li class="foo">
        <input type="text">
      </li>
      <li class="foo">
        <input type="text">
      </li>
      <li class="foo">
        <input type="text">
      </li>
      <li class="foo">
        <input type="text">
      </li>
      <li class="foo">
        <input type="text">
      </li>
      <li class="foo">
        <input type="text">
      </li>
      <li class="foo">
        <input type="text">
      </li>
    
    </ul>

    Пожалуйста, проверьте ниже ссылку для получения дополнительной информации

    Светящиеся синие входные блики

    Вы этого хотели ?