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

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 @-webkit-keyframes从版本5+开始使用
• Firefox @keyframes自版本16开始使用(使用v5-15 @-moz-keyframes)
• Opera使用@-webkit-keyframes版本15-22(仅使用v12 @-o-keyframes)
• Internet Explorer @keyframes自版本10+开始使用

编辑:

我想出了那个小提琴:

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

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

Answer 2

我不认为只使用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 3

它比这更容易:只需转换元素上的相同属性即可

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

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

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

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

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

按照

在您的事件处理程序中排队的任何 rAF 都将在“同一帧”中执行。在 rAF 中排队的任何 rAF 将在下一帧中执行吗？。

function fn(el, isEnter) {
  el.className = "";
   requestAnimationFrame(() => {
    requestAnimationFrame(() => {
        el.className = isEnter? "in": "out";
    });
  });  
}

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