アニメーションは、私は私のCSSクラス ためのいくつかのアニメーションを追加しようとしているCSS

Question

を動作しません。ここでは、コードです：

#primary_nav_wrap li a:hover:after { 
    height: 4px; 
    -webkit-border-radius: 4px 4px 0 0; 
    -moz-border-radius: 4px 4px 0 0; 
    border-radius: 4px 4px 0 0; 
    background-color: #23a298; 
    bottom: 0; 
    content: ""; 
    left: 0; 
    right:0; 
    margin-left:auto; 
    margin-right:auto; 
    position: absolute; 
    top: 96px; 
    width: calc(100% - 15px); 

    -webkit-transition: color 0.4s ease-out; 
    -moz-transition: color 0.4s ease-out; 
    -o-transition: color 0.4s ease-out; 
    -ms-transition: color 0.4s ease-out; 
    transition: color 0.4s ease-out; 
} 

すべてが正常であるが、この部分は動作しません：

-webkit-transition: color 0.4s ease-out; 
-moz-transition: color 0.4s ease-out; 
-o-transition: color 0.4s ease-out; 
-ms-transition: color 0.4s ease-out; 
transition: color 0.4s ease-out; 

Answer 1

あなたはまた、あなたが移行を取得する必要がありますどのスタイルは言及しなかった、ホバー上のトランジションエフェクトを入れていない、あなたのa:after

#primary_nav_wrap li a:after { 
    height: 4px; 
    -webkit-border-radius: 4px 4px 0 0; 
    -moz-border-radius: 4px 4px 0 0; 
    border-radius: 4px 4px 0 0; 
    bottom: 0; 
    content: ""; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
    top: 96px; 
    width: calc(100% - 15px); 
    -webkit-transition: background-color 0.4s ease-out; 
    -moz-transition: background-color 0.4s ease-out; 
    -o-transition: background-color 0.4s ease-out; 
    -ms-transition: background-color 0.4s ease-out; 
    transition: background-color 0.4s ease-out; 
} 

にこのコードを追加します。

：私は background-color

例にそれを与えました210

https://jsfiddle.net/7o2mw6ng/

Answer 2

置く試してみてくださいホバーを適用無し要素に遷移：

#primary_nav_wrap li a:after { 
    -webkit-transition: color 0.4s ease-out; 
    -moz-transition: color 0.4s ease-out; 
    -o-transition: color 0.4s ease-out; 
    -ms-transition: color 0.4s ease-out; 
    transition: color 0.4s ease-out; 
} 

編集：aタグの色を変更しているため、そこでトランジションを適用する必要があります。

#primary_nav_wrap ul a { 
    -webkit-transition: color 0.4s ease-out; 
    -moz-transition: color 0.4s ease-out; 
    -o-transition: color 0.4s ease-out; 
    -ms-transition: color 0.4s ease-out; 
    transition: color 0.4s ease-out; 
} 

See jsfiddle here.