Михаил

По порядку:
1) Не совсем верно. Не рекомендуют оставлять дефолтный аутлайн. Рекомендуют менять стиль элемента, когда он в фокусе, чтобы пользователю было удобнее осуществлять навигацию и ориентироваться какой элемент в данный момент активный. И оставлять дефолтный аутлайн если Вы не хотите с этим заморачиваться.

2) Есть разные варианты. Вот из свежего: https://matthiasott.com/notes/focus-visible-is-here - тут Вы найдёте современное решение и как его распространить на старые браузеры.

Не работает, потому что не предусмотрено. Сами продублируйте классы из animate.css для псевдоэлементов

.animated__before::before {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}