Question

因此，可以在鼠标输出时进行反向动画，例如：

.class{
   transform: rotate(0deg);

}
.class:hover{
   transform: rotate(360deg);
}

但是，当使用@keyframes动画时，我无法让它工作，例如：

.class{
   animation-name: out;
   animation-duration:2s;

}
.class:hover{
   animation-name: in;
   animation-duration:5s;
   animation-iteration-count:infinite;

}
@keyframe in{
    to {transform: rotate(360deg);}
}

@keyframe out{
    to {transform: rotate(0deg);}
}

什么是最佳解决方案，知道我需要迭代和动画本身？

http://jsfiddle.net/khalednabil/eWzBm/

Answer 1

我认为如果您有to，则必须使用from。我会想到这样的事情：

@keyframe in {
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@keyframe out {
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

当然必须已经检查过了，但我发现很奇怪你只使用transform属性，因为CSS3并没有完全实现。也许它可以通过以下考虑更好地工作：

Chrome使用@-webkit-keyframes，不需要任何特定版本
Safari从版本5 +

@-webkit-keyframes

自版本16（v5-15使用@keyframes）

@-moz-keyframes

Opera使用@-webkit-keyframes版本15-22（仅使用v {使用@-o-keyframes）
从版本10 +

@keyframes

编辑：

我想出了那个小提琴：

http://jsfiddle.net/JjHNG/35/

使用最少的代码。它接近你的预期吗？

Answer 2

它比这更容易：只需在元素上转换相同的属性

.earth { width:  0.92%;    transition: width 1s;  }
.earth:hover { width: 50%; transition: width 1s;  }

https://codepen.io/lafland/pen/MoEaoG

Answer 3

我不认为只使用CSS动画就可以实现这一点。我假设CSS转换不满足您的用例，因为（例如）您想要将两个动画链接在一起，使用多个停止，迭代或以其他方式利用额外的动力动画授予你。

我没有找到任何方法来触发CSS动画专门用于鼠标移出而不使用JavaScript来附加“over”和“out”类。虽然您可以使用基本CSS声明在：hover结束时触发动画，但同样的动画将在页面加载时运行。使用“over”和“out”类，您可以将定义拆分为基本（加载）声明和两个动画触发器声明。

此解决方案的CSS将是：

.class {
    /* base element declaration */
}
.class.out {
   animation-name: out;
   animation-duration:2s;

}
.class.over {
   animation-name: in;
   animation-duration:5s;
   animation-iteration-count:infinite;
}
@keyframes in {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes out {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

使用JavaScript（jQuery语法）将类绑定到事件：

$(".class").hover(
    function () {
        $(this).removeClass('out').addClass('over');
    },
    function () {
        $(this).removeClass('over').addClass('out');
    }
);

Answer 4

创建反向动画对于一个简单的问题有点过大，您需要的是

animation-direction: reverse

但是，由于动画规格过于繁琐，以至于他们忘了添加重新启动动画的方法，因此这无法单独发挥作用，因此您可以在js的帮助下完成此操作

let item = document.querySelector('.item')

// play normal
item.addEventListener('mouseover', () => {
  item.classList.add('active')
})

// play in reverse
item.addEventListener('mouseout', () => {
  item.style.opacity = 0 // avoid showing the init style while switching the 'active' class

  item.classList.add('in-active')
  item.classList.remove('active')

  // force dom update
  setTimeout(() => {
    item.classList.add('active')
    item.style.opacity = ''
  }, 5)

  item.addEventListener('animationend', onanimationend)
})

function onanimationend() {
  item.classList.remove('active', 'in-active')
  item.removeEventListener('animationend', onanimationend)
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

div {
  background: black;
  padding: 1rem;
  display: inline-block;
}

.item {
  /* because span cant be animated */
  display: block;
  color: yellow;
  font-size: 2rem;
}

.item.active {
  animation: spin 1s forwards;
  animation-timing-function: ease-in-out;
}

.item.in-active {
  animation-direction: reverse;
}

<div>
  <span class="item">ABC</span>
</div>

Answer 5

你最好只使用一个动画，但让它反转吗？

animation-direction: reverse

Answer 6

试试这个：

@keyframe in {
from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframe out {
from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

支持Firefox 5 +，IE 10 +，Chrome，Safari 4 +，Opera 12 +

Answer 7

我们可以使用requestAnimationFrame重置动画，并在浏览器绘制下一帧时反转动画。

还使用onmouseenter和onmouseout事件处理程序来反转动画方向

As per

在事件处理程序中排队的所有rAF将以相同的方式执行框架。排队在raf中的所有raf将在下一帧执行。

.in{
  animation: k 1s forwards;
}

.out{
  animation: k 1s forwards;
  animation-direction: reverse;
}

@keyframes k
{
from {transform: rotate(0deg);}
to   {transform: rotate(360deg);}
}

<div style="width:100px; height:100px; background-color:red" 
  onmouseenter="fn(this, true)"
   onmouseleave="fn(this, false)"  
     ></div>

split

Answer 8

在这里尝试了几种解决方案，没有任何问题可以正常工作；然后在网上搜索了更多内容，以在https://greensock.com/处找到 GSAP （要获得许可，但这是允许的）；一旦您引用了lib ...

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>

...你可以去

  var el = document.getElementById('divID');    

  // create a timeline for this element in paused state
  var tl = new TimelineMax({paused: true});

  // create your tween of the timeline in a variable
  tl
  .set(el,{willChange:"transform"})
  .to(el, 1, {transform:"rotate(60deg)", ease:Power1.easeInOut});

  // store the tween timeline in the javascript DOM node
  el.animation = tl;

  //create the event handler
  $(el).on("mouseenter",function(){
    //this.style.willChange = 'transform';
    this.animation.play();
  }).on("mouseleave",function(){
     //this.style.willChange = 'auto';
    this.animation.reverse();
  });

它将完美运行。

Answer 9

将转换与转换结合使用对我来说完美无缺：

.ani-grow {
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
}
.ani-grow:hover {
    transform: scale(1.01);
}

Answer 10

我已经将一个 CodePen 与仅 CSS 修复和一个包含 2 行 jQuery 的代码放在一起，以修复页面加载问题。继续阅读以了解更简单版本中的 2 个解决方案。

https://codepen.io/MateoStabio/pen/jOVvwrM

如果您正在搜索如何仅使用 CSS 执行此操作，Xaltar 的答案简单明了，并且是正确的解决方案。唯一的缺点是页面加载时会播放鼠标移开的动画。发生这种情况是因为要完成这项工作，您需要使用 OUT 动画设置元素样式，并使用 IN 动画设置 :hover 样式。

svg path{
    animation: animateLogoOut 1s;
}
svg:hover path{
    animation: animateLogoIn 1s;
}

@keyframes animateLogoIn {
    from {stroke-dashoffset: -510px;}
    to {stroke-dashoffset: 0px;}
}
@keyframes animateLogoOut {
    from {stroke-dashoffset: 0px;}
    to {stroke-dashoffset: -510px;}
}

有些人发现这个解决方案在页面加载时没用。对我来说，这是完美的解决方案。但是我用这两种解决方案制作了一个 Codepen，因为在不久的将来我可能会需要它们。

如果您不想在页面加载时使用 CSS 动画，您将需要使用一个很小的 JS 脚本，该脚本仅在元素第一次悬停后才使用 OUT 动画设置元素的样式。我们将通过向元素添加 .wasHovered 类并使用 OUT 动画设置添加的类的样式来实现此目的。

jQuery：

$("svg").mouseout(function() {
    $(this).addClass("wasHovered");
 });

CSS：

svg path{

}

svg.wasHovered path{
    animation: animateLogoOut 1s;
}

svg:hover path{
    animation: animateLogoIn 1s;
}

@keyframes animateLogoIn {
    from {stroke-dashoffset: -510px;}
    to {stroke-dashoffset: 0px;}
}
@keyframes animateLogoOut {
    from {stroke-dashoffset: 0px;}
    to {stroke-dashoffset: -510px;}
}

瞧！您可以在我的 codepen 上找到所有这些以及更多内容，其中详细显示了带有 SVG 徽标悬停动画的 2 个选项。

https://codepen.io/MateoStabio/pen/jOVvwrM

如何在悬停后将鼠标移出动画

10 个答案: