CSS3の遷移：後に擬似要素がメインアイテムの遷移終了まで待つ

Question

シンプルな問題があります：擬似要素（：after、：before）とメインアイテムにCSS遷移を付けると、メインアイテムのアニメーションの終了を待っている擬似要素のアニメーション。私は両方のアニメーションを同時にしたいです。 私はこの問題はFireFox（50.0.1）のChrome（54.0.2840.99）でのみ問題なく動作します。

問題を示すこのフィドル： https://jsfiddle.net/CptCrunch/wtse7e8b/1

body { 
    text-align: center; 
} 

a { 
    font-size: 50px; 
    font-weight: 800; 
    color: red; 
    text-decoration: none; 
    transition: all 1s linear 0s; 
} 

a:hover { 

    color: blue; 
} 

a::before { 
    content: "\0005B"; 
    margin-right: 30px; 
    transition: all 1s linear 0s; 
} 

a::after { 
    content: "\0005D"; 
    margin-left: 30px; 
    transition: all 1s linear 0s; 
} 

は、この問題を解決する方法はありますか？手伝ってくれてありがとう。

Answer 1

transitionの各値を（allではなく）各要素に設定すると、Chromeで意図したとおりに動作するようです。私はFirefoxをテストしたが、それでもうまく動作する。

a { 
    font-size: 50px; 
    font-weight: 800; 
    color: red; 
    text-decoration: none; 
    transition: color 1s linear 0s; /*set color only*/ 
} 

a:hover { 
    color: blue; 
} 

a::before { 
    content: "\0005B"; 
    margin-right: 30px; 
    transition: margin 1s linear 0s; /*set margin only*/ 
} 

a::after { 
    content: "\0005D"; 
    margin-left: 30px; 
    transition: margin 1s linear 0s; /*set margin only*/ 
} 

私はupdated your js.fiddle hereです。希望が役立ちます。

Answer 2

allは、2つの異なる変換にスリットする部分を使用しないでください。この問題を修正

body { 
 
    text-align: center; 
 
} 
 

 
a { 
 
    font-size: 50px; 
 
    font-weight: 800; 
 
    color: red; 
 
    text-decoration: none; 
 
    transition: color 1s linear 0s; 
 
} 
 

 
a:hover { 
 

 
    color: blue; 
 
} 
 

 
a::before { 
 
    content: "\0005B"; 
 
    margin-right: 30px; 
 
    transition: margin 1s linear 0s; 
 
} 
 

 
a::after { 
 
    content: "\0005D"; 
 
    margin-left: 30px; 
 
    transition: margin 1s linear 0s; 
 
} 
 

 
a:hover::before { 
 
    margin-right: 2px; 
 
} 
 

 
a:hover::after { 
 
    margin-left: 2px; 
 
}

<a href="#">Hello world!</a>