html - CSS动画如何对悬停事件使用“反转”？

Question

给定此代码（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>

为什么没有动画？错误在哪里？

编辑：
通过使用两个分开的动画，它确实起作用了，但是具有反向属性的意义何在呢？

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

编辑2：
如果我使用更多的时间，即使看到从一种状态跳到另一种状态的不良影响，我也应该看动画

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

Answer 1

首先让我们了解reverse的含义


  动画在每个循环中向后播放。换句话说，每次动画循环时，动画将重置为结束状态并重新开始。动画步骤向后执行，计时功能也相反。例如，缓入定时功能变为缓入。 ref


让我们以一个基本的例子来理解：

.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对于避免在相反方向定义新动画很有用。我们定义了一个从左到右的动画，反之，则是从右到左的动画。到目前为止，这是微不足道的。

现在，如果您运行由其名称定义的任何类型的动画，并且在路上修改该动画的属性，您将更改整个动画的行为，我们将基于新动画再次计算当前状态的值。

例：

.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的值。

如果元素在正常状态下位于动画的 5s处，则为 left:100px；在相反状态下，我们为 left:200px；因此，如果将鼠标悬停在 5s上，则将在 100px和 。您不会考虑 200px并返回到 left:100px

现在可以清楚地看到，如果动画结束了，您只需在第一个和最后一个状态之间切换即可。您将不会再触发新的动画，因为我们正在处理相同的动画，而我们只是更改了一个设置（方向）

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

如果更改任何其他属性，也会发生相同的逻辑。您将不会看到直观的结果，因为您需要想象新的动画效果如何才能确定当前状态。

如果我们更改计时功能的示例

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

如果我们更改持续时间的示例：

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

您要寻找的内容可以通过 0px来实现，因为转换仅关心当前值，并且在需要时转换为新值（例如，悬停时）

.intern {
  width: 100px;
  height: 100px;
  margin:50px;
  background-color: red;
  transition:10s all;
  
}

.intern:hover {
  transform:scale(4);
}

<div style="" class="intern"></div>

悬停时，您将启动一个缩放动画，如果您将其悬停，则动画将持续 transition，直到返回初始状态。您不能使用动画来做到这一点。动画需要完全播放，或者在中间突然取消动画，然后回到初始状态

即使您定义了两个动画，当运行中的一个动画还没有结束时，您也不会总是在其上获得所需的结果。您将取消它并运行新的。

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

尝试快速悬停/悬停，您会看到不好的效果。如果将鼠标悬停在每个动画的末尾，则只有完美的结果。