要素の変更フォーカスの切り替え効果

Question

要素から別の要素へのフォーカスの変更にどのように影響を与えることができますか。

たとえば、このサイトをクロムでチェックします。

http://webaim.org/

これは、1つの要素から別のものに焦点をジャンプするためのいくつかのトランジション効果を有します。

同じ効果が欲しいです。私は次の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

これはどういう意味ですか？あなたは2つの宣言を持っている必要があり

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番目の "ホバー"ルール。

最初のルールは、2番目のルールに移行した標準について説明しています。 2番目のルールに変更されたオプションがあります。

Answer 2

これはJavaScriptのUIコンセプトで、::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 />

私が書いた答えは右で明確にするために、私はOPで尋ねたとして、WebAIM.org含まWho uses Flying Focus: In the Wildからのスクリーンショットを取得することができます。