CSS动画如何使用“反向"进行悬停事件? [英] css animation how to use "reverse" for a hover and out event?
问题描述
给出此代码( http://jsfiddle.net/bzf1mkx5/)
.intern {
-webkit-animation: in 1s 1 reverse forwards;
}
.intern:hover {
-webkit-animation: in 1s 1 normal forwards;
}
@-webkit-keyframes in {
from { -webkit-transform: scale(1); }
to { -webkit-transform: scale(1.2);}
}
<div style = "width : 100px; height : 100px; background-color : red" class ="intern"></div>
为什么没有动画?错误在哪里?
Why are animations absent? Where is the mistake?
通过使用两个分开的动画，它确实起作用了，但是具有 reverse 属性的意义何在?
By using two separated animations it does work, but then what's the point of having a reverse property?
.intern {
-webkit-animation: in2 1s 1 reverse forwards;
}
.intern:hover {
-webkit-animation: in 1s 1 normal forwards;
}
@-webkit-keyframes in {
from { -webkit-transform: scale(1); }
to { -webkit-transform: scale(1.2);}
}
@-webkit-keyframes in2 {
from { -webkit-transform: scale(1); }
to { -webkit-transform: scale(1.2);}
}
<div style = "width : 100px; height : 100px; background-color : red" class ="intern"></div>
如果我使用更多的时间，即使看到从一种状态跳到另一种状态的不良后果，我也应该看动画
If I use higher times, I should see the animations even though I will see the unwanted effect of jumping from one state to the another
.intern {
-webkit-animation: in 20s 1 reverse forwards;
}
.intern:hover {
-webkit-animation: in 20s 1 normal forwards;
}
@-webkit-keyframes in {
from { -webkit-transform: scale(1); }
to { -webkit-transform: scale(4);}
}
<div style = "width : 50px; height : 50px; background-color : red" class ="intern"></div>
推荐答案
让我们首先了解reverse的意思
动画在每个循环中向后播放.换句话说，每次动画循环时，动画将重置为结束状态并重新开始.动画步骤向后执行，计时功能也相反.例如，缓入定时功能变为缓入. 参考
The animation plays backwards each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and timing functions are also reversed. For example, an ease-in timing function becomes ease-out. ref
让我们以一个基本的例子来理解:
Let's take a basic example to understand:
.box {
width:50px;
height:50px;
margin:5px;
background:red;
position:relative;
}
.normal {
animation: move normal 2s linear forwards;
}
.reverse {
animation: move reverse 2s linear forwards;
}
@keyframes move{
from {
left:0;
}
to {
left:300px;
}
}
<div class="box normal">
</div>
<div class="box reverse">
</div>
我们有一个动画，第一个元素向前运行，而第二个元素向后运行.从技术上讲，就像我们反转from和to一样. reverse对于避免在相反方向定义新动画很有用.我们定义了一个从左至右动画，反之，则是一个从右至左动画.到现在为止，这是微不足道的.
We have one animation and the first element is runnig it forwards while the second element is running it backwards. Technically, it's like we invert the from and to. reverse is useful in order to avoid defining a new animation in the opposite direction. We define a left-to-right animation and with reverse we have the right-to-left one. Until now, it's trivial.
现在，如果您运行任何由其名称定义的动画，并且在路上修改该动画的属性，您将更改整个动画的行为，我们将根据新动画再次计算当前状态的值.动画.
Now, if you run any kind of animation defined by its name and in the road you modify a property of this animation you will change the behavior of the whole animation and we calculate again the value of the current state based on the new animation.
示例:
.box {
width:50px;
height:30px;
margin:5px;
background:red;
position:relative;
}
.normal,
.special{
animation: move normal 20s linear forwards;
background:blue;
}
.reverse,
div:hover .special{
animation: move reverse 20s linear forwards;
background:green;
}
@keyframes move{
from {
left:0;
}
to {
left:300px;
}
}
p {
margin:0;
}
<p>Reference</p>
<div class="box normal"></div>
<div class="box reverse"></div>
<p>Hover the element</p>
<div>
<div class="box special"></div>
</div>
我们有3个元素同时使用相同的动画进行动画制作，因此它们都将处于相同的进度.第三个与第一个动画相同，并且悬停时与第二个相同.诀窍就在这里！在悬停时，您将不会考虑元素的实际位置，而只是朝另一个方向移动，而是会考虑由reverse定义的新动画，并考虑动画的实际进度来计算left的值.
We have 3 elements animating using the same animation at the same time so they will all be at the same progress. The third one is the same as the first animation and on hover it become the same as the second one. The trick is here! on hover you will not consider the actual position of the element and simply move in the other direction but you will consider the new animation defined by reverse and calculate the value of left considering the actual progress of the animation.
如果元素在正常状态下位于动画的5s处，则将具有left:100px；在相反状态下，我们将具有left:200px；因此，如果将鼠标悬停在5s上，将在100px之间切换和200px.您不会考虑left:100px并返回到0px
If the element is at 5s of the animation in the normal state we will have left:100px and in the reverse state we will have left:200px so if you hover at 5s you will toggle between 100px and 200px. You will not consider left:100px and move back to the 0px
现在很清楚，如果动画结束了，您只需在第一个和最后一个状态之间切换即可.您将不再触发新的动画，因为我们正在处理相同的动画，而我们只是更改了一个设置(方向)
Now it clear that if the animation is over, you will simply toggle between the first and the last state. You will not trigger a new animation again since we are dealing with the same animation and we simply changed one setting (the direction)
.box {
width:50px;
height:30px;
margin:5px;
background:red;
position:relative;
}
.normal,
.special{
animation: move normal 1s linear forwards;
background:blue;
}
.reverse,
div:hover .special{
animation: move reverse 1s linear forwards;
background:green;
}
@keyframes move{
from {
left:0;
}
to {
left:300px;
}
}
p {
margin:0;
}
<p>Reference</p>
<div class="box normal"></div>
<div class="box reverse"></div>
<p>Hover the element</p>
<div>
<div class="box special"></div>
</div>
如果更改任何其他属性，也会发生相同的逻辑.您将不会看到直观的结果，因为您需要想象新动画的状态以识别当前状态.
Same logic happen if you change any other property. You will not see an intuitive result because you need to imagine how the new animation will be in order to identify how the current state will become.
例如，如果我们更改计时功能
Example if we change the timing-function
.box {
width:50px;
height:30px;
margin:5px;
background:red;
position:relative;
}
.normal,
.special{
animation: move 20s linear forwards;
background:blue;
}
.reverse,
div:hover .special{
animation: move 20s ease forwards;
background:green;
}
@keyframes move{
from {
left:0;
}
to {
left:300px;
}
}
p {
margin:0;
}
<p>Reference</p>
<div class="box normal"></div>
<div class="box reverse"></div>
<p>Hover the element</p>
<div>
<div class="box special"></div>
</div>
例如，如果我们更改持续时间:
Example if we change the duration:
.box {
width:50px;
height:30px;
margin:5px;
background:red;
position:relative;
}
.normal,
.special{
animation: move 20s linear forwards;
background:blue;
}
.reverse,
div:hover .special{
animation: move 30s linear forwards;
background:green;
}
@keyframes move{
from {
left:0;
}
to {
left:300px;
}
}
p {
margin:0;
}
<p>Reference</p>
<div class="box normal"></div>
<div class="box reverse"></div>
<p>Hover the element</p>
<div>
<div class="box special"></div>
</div>
您要查找的内容可以通过transition来实现，因为转换仅关心当前值，并且在需要时(例如，悬停时)将转换为新值.
What you are looking for can be achieved with transition because transition will only care about the current value and will transition to a new one when you want (on hover for example)
.intern {
width: 100px;
height: 100px;
margin:50px;
background-color: red;
transition:10s all;
}
.intern:hover {
transform:scale(4);
}
<div style="" class="intern"></div>
当您将鼠标悬停时，将开始一个缩放动画，如果您将鼠标悬停在其上，则该缩放将持续10s，直到您回到初始状态.您不能通过动画来做到这一点.动画需要完全播放，或者在中间突然取消动画，然后回到初始状态
When you hover you will start a scale animation that will last 10s BUT if you unhover before you will get back to the initial state. You cannot do this with animation. An animation need to either run fully or you abruptly cancel it in the middle and you get back to initial state
即使您定义了两个动画，当运行中的一个动画尚未结束时，也不会总是在您悬停时获得所需的结果.您将取消它并运行新的.
Even if you define two animation you will not always have the needed result in you hover when the running one is not yet over. You will cancel it and run the new one.
.intern {
width: 100px;
height: 100px;
margin:50px;
background-color: red;
animation:in 5s linear forwards;
}
.intern:hover {
animation:out 5s linear forwards;
}
@keyframes in {
from {
transform:scale(1);
}
to {
transform:scale(4);
}
}
@keyframes out {
from {
transform:scale(4);
}
to {
transform:scale(1);
}
}
<div style="" class="intern"></div>
尝试快速悬停/悬停，您会看到坏的效果.如果将鼠标悬停在每个动画的末尾，您将只有一个完美的结果.
Try to hover/unhover rapidly and you will see the bad effect. You will only have a perfect result if you hover at the end of each animation.
这篇关于CSS动画如何使用“反向"进行悬停事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
