CSS悬停在元素上应该触发相反的过渡答案

【问题标题】：CSS hover off of element should trigger opposite transitionCSS悬停在元素上应该触发相反的过渡
【发布时间】：2013-09-01 00:53:06
【问题描述】：

我有一个带有“+”的 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

【问题讨论】：

我认为最好忘记移动关键帧并将它们全部转换为过渡
你能把jsfiddle放在一起吗？
@Adrift 添加了小提琴

标签： css animation css-animations

【解决方案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

【讨论】：

【解决方案2】：

由于我无法添加评论（需要愚蠢的 50 声望点），我必须添加答案。

您已经有了“可行的”解决方案，但是...
...您的标记不是很“理想”，尤其是从语义的角度来看（甚至无效，如果不与 HTML5 doctype 一起使用）。

我宁愿不使用这种“CSS 噱头”而不是更“语义化的代码”。因此，您可以使用伪元素（::before 和 ::after），至少对于某些浏览器，它们也可以“动画化” - 请参阅：http://css-tricks.com/transitions-and-animations-on-css-generated-content/

【讨论】：