鼠标悬停后如何反转动画

So, it is possible to have reverse animation on mouse out such as:

因此，可以在鼠标上设置反向动画，比如:

.class{
   transform: rotate(0deg);

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

but, when using @keyframes animation, I couldn't get it to work, e.g:

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

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

What is the optimal solution, knowing that I'd need iterations and animation itself?

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

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

5 个解决方案

#1

I think that if you have a to, you must use a from. I would think of something like :

我认为如果你有一个to，你必须用from。我可以这样想:

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

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

Of course must have checked it already, but I found strange that you only use the transform property since CSS3 is not fully implemented everywhere. Maybe it would work better with the following considerations :

当然一定已经检查过它了，但是我发现奇怪的是，您只使用transform属性，因为CSS3并不是在所有地方都完全实现的。也许考虑到以下几点会更好:

Chrome uses @-webkit-keyframes, no particuliar version needed
Chrome使用的是@-webkit-keyframe，不需要特殊版本
Safari uses @-webkit-keyframes since version 5+
Safari从版本5+开始就使用@-webkit-keyframe
Firefox uses @keyframes since version 16 (v5-15 used @-moz-keyframes)
自第16版以来，Firefox使用了@keyframe (v5-15使用了@- mozilla -keyframe)
Opera uses @-webkit-keyframes version 15-22 (only v12 used @-o-keyframes)
Opera使用@-webkit-keyframe版本15-22(只有v12使用@-o-keyframe)
Internet Explorer uses @keyframes since version 10+
Internet Explorer使用自版本10+以来的@keyframe

EDIT :

编辑:

I came up with that fiddle :

我想出了那把小提琴:

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

Using minimal code. Is it approaching what you were expecting ?

使用最少的代码。它接近你所期望的吗?

#2

Its much easier than all this: Simply transition the same property on your element

它比所有这些要简单得多:只需在元素上转换相同的属性

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

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

#3

I don't think this is achievable using only CSS animations. I am assuming that CSS transitions do not fulfil your use case, because (for example) you want to chain two animations together, use multiple stops, iterations, or in some other way exploit the additional power animations grant you.

我不认为仅仅使用CSS动画就能实现这一点。我假设CSS转换不满足您的用例，因为(例如)您想要将两个动画连接在一起，使用多个停止、迭代，或者以其他方式利用额外的power动画。

I've not found any way to trigger a CSS animation specifically on mouse-out without using JavaScript to attach "over" and "out" classes. Although you can use the base CSS declaration trigger an animation when the :hover ends, that same animation will then run on page load. Using "over" and "out" classes you can split the definition into the base (load) declaration and the two animation-trigger declarations.

我还没有找到任何方法可以在不使用JavaScript的情况下，用鼠标来触发CSS动画，而不需要附加“over”和“out”类。虽然您可以使用基本的CSS声明触发一个动画，当:鼠标悬停结束时，同样的动画将在页面加载上运行。使用“over”和“out”类，可以将定义拆分为基本(load)声明和两个动画触发器声明。

The CSS for this solution would be:

此解决方案的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);
    }
}

And using JavaScript (jQuery syntax) to bind the classes to the events:

使用JavaScript (jQuery语法)将类绑定到事件:

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

#4

Would you be better off having just the one animation, but having it reverse?

如果你只有一个动画，但让它倒转，你会做得更好吗?

animation-direction: reverse

#5

Try this:

试试这个:

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

supported in Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

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

#1