CSS hover off of element should trigger opposite transition

CSS hover off of element should trigger opposite transition

I have a div with a "+" in it which does this on hover:
.removal {
opacity: 0;
filter: alpha(opacity=0);
margin-left: -10px;
display: inline-block;
-webkit-transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.term:hover .removal {
position: relative;
left: 13px;
opacity: 1;
color: red;
-webkit-transform: rotate(45deg);
-webkit-animation: move 0.4s;
}
@-webkit-keyframes "move" {
from {
left: 3px;
filter: alpha(opacity=0);
opacity: 0;
}
to {
left: 13px;
filter: alpha(opacity=100);
opacity: 1;
}
}
The problem I'm experiencing is when I mouse off of that li, I'd like the
CSS to essentially undo the animation found in move.
Any tips on how to do this? Should I add a transition to .term (which is
the class on the li)?