CSSトランジション：発射のための複数の遷移

Question

demo

HTML

<a href="#"><span>text insie span</span> |||| text inside anchor</a> 

SASS

span { 
    transition: all 500ms ease; 
} 

a { 
    transition: all 5000ms ease; 

    &:hover { 
    color: red; 
    } 
} 

ホバーは、最初5000ms遷移が<span>を無視して<a>に発射されます。それが終わった後、それが起こるのはなぜ

、<span>

に500msの移行を発射？同時に始めるべきではありませんか？なぜ<a>が自身の期間によって<span>の移行を遅らせるのですか？

Answer 1

spanには独自のルールがありませんので、ブラウザはこれを別の方法で処理します。

クロムは単にanchorのものですが、Firefoxでは実際にはspanの最初のものを実行してからanchorのものを上書きします。

プロパティの継承が含まれていて、同じルールを持つ要素の同じプロパティをアニメーション化できないため、どちらが正しいかはわかりません。

あなたはspanに:hoverルールを追加した場合、あなたはそれが期待

ノートとして働く参照してくださいよ、あなたはspanまたは他に何もスタックが

をスニペットの移行

と起こらないホバーする必要があります

span { 
 
    color: pink; 
 
    transition: all 500ms ease; 
 
} 
 
span:hover { 
 
    color: lime; 
 
} 
 

 
a { 
 
    transition: all 5000ms ease; 
 
} 
 
a:hover { 
 
    color: red; 
 
}

<a href="#"><span>text insie span</span> |||| text inside anchor</a>