Transition in wrong place in CSS to take effect

[jsms90]

li {
      height: 25px;
      padding:0px;
      display: inline-block;
      transition: 0.3s;
      padding-top: 2%;
      text-align: center;

      a {
        text-decoration: none;
        color:$black;
        opacity: 1;

        &:hover {
          opacity: 0.5;
        }
      }
    }

Just move transition from li to a