Для создания анимации для border-bottom можно использовать CSS свойство transition.
Пример кода:
```css
input {
border-bottom: 2px solid transparent; /* начальное состояние - невидимая граница */
transition: border-bottom 0.3s; /* задаем плавность анимации */
}
input:focus {
border-bottom: 2px solid black; /* при фокусировке элемента граница появляется */
}
```
В данном примере при фокусировке на элементе input, граница будет появляться плавно с лева на право за 0.3 секунды. При потере фокуса граница будет исчезать.
Для более плавного изменения стиля границы у элемента input при фокусировке и разфокусировке, можно использовать transition с параметром ease-in-out, который добавит плавность начала и завершения анимации:
```css
input {
border-bottom: 2px solid transparent; /* начальное состояние - невидимая граница */
transition: border-bottom 0.3s ease-in-out; /* задаем плавное начало и завершение анимации */
}
input:focus {
border-bottom: 2px solid black; /* при фокусировке элемента граница появляется */
}
```
Таким образом, при фокусировке элемента input граница будет появляться постепенно с лева на право, а при разфокусировке исчезать плавно с права на лево.