动画不起作用CSS

Question

我想补充一些动画，我的CSS类 这里是代码：

#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

例如：

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.