元素的 CSS 悬停应触发相反的过渡

Question

我有一个带有“+”的 div，它在悬停时执行此操作:

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

我遇到的问题是，当我将鼠标移开那个 li 时，我希望 CSS 基本上撤消在 move 中找到的动画。

关于如何执行此操作的任何提示？我应该向 .term(这是 li 上的类)添加过渡吗？

这是一个 JSfiddle

Answer 1

.removal {
  opacity: 0;
  filter: alpha(opacity=0);
  margin-left: -10px;
  display: inline-block;
  -webkit-transform: rotate(0deg);
  -webkit-transition: all 1s ease-in-out;
  position:relative;
}

.term:hover .removal {
  opacity: 1;
  color: red;
  left:13px;
  -webkit-transform: rotate(45deg);
  filter: alpha(opacity=100);
}

jsFiddle here