Animation does not work CSS

Question

I am trying to add some animation for my CSS class Here's code:

#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;
}

Everything is fine, but this part does not work:

-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

Add this code to your 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;
}

You don't put the transition effect on the hover, also, you didn't mention which style should get the transition so I gave it to the background-color

Example:

https://jsfiddle.net/7o2mw6ng/

Answer 2

Try placing the transition on the element without the hover applied:

#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;
}

Edit: You're changing the colour on the a tag so you need to apply the transition there.

#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.