Эффект перехода фокуса изменения элемента

Question

Как я могу реализовать эффект изменения фокуса от элемента к другому элементу.

Как, например, проверьте этот сайт в хроме.

http://webaim.org/

имеет некоторый эффект перехода для прыжков фокуса от одного элемента к другому.

Я хочу такой же эффект. Я пробовал следующий css, но он не работает.

color: #BF1722; 
transition: color 0.2s ease-in, text-shadow 0.2s ease-in; 
-webkit-transition: color 0.2s ease-in, text-shadow 0.2s ease-in; 
text-shadow: #bbb 1px 1px 1px; 

Есть ли какие-либо javascript? ИЛИ Я что-то пропустил в css?

Answer 1

Вы имеете в виду это?

a { 
 
    transition: color 0.2s ease-in, text-shadow 0.2s ease-in, background-color 0.25s linear 0s; 
 
} 
 

 
a:hover { 
 
    text-shadow: #bbb 1px 1px 1px; 
 
    background-color: #ffffcc; 
 
    color: #BF1722; 
 
}

<a>test test test test</a>

---

Вы должны иметь 2 декларации. Сначала основное правило и второе правило «зависания».

Первое правило описывает стандарт с переходом ко второму правилу. Второе правило имеет только измененные параметры.

Answer 2

Это концепция пользовательского интерфейса JavaScript, используя ::after и ::before псевдо элементы. Полный исходный код доступен здесь: GitHub - NV/flying-focus.

Существует также объяснение того, как это работает в YouTube.

Отрывок

<script src="http://n12v.com/focus-transition/flying-focus.js"></script> 
 
<input /><br /><br /><br /><br /> 
 
<input /><br /><br /><br /><br /> 
 
<input /><br /><br /><br /><br /> 
 
<input />

Чтобы уточнить ответ, который я написал правильно, я могу получить скриншот Who uses Flying Focus: In the Wild, который содержит WebAIM.org, как и на вопрос ОП.