css - Javascript - fade to display:none

I am trying to fade a d3 chord in a chord diagram to display:none

It works if I use the css class:

#circle:hover path.fade {
opacity: .03;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}

however, this does not work with display:none. Any suggestions?

EDIT:

Ah this is a duplicate - missed the original question. Thanks!