如何在悬停时反转关键帧？答案

【问题标题】：How can I reverse keyframe on hover off?如何在悬停时反转关键帧？
【发布时间】：2014-11-19 12:11:29
【问题描述】：

我正在使用关键帧制作卡片翻转动画。除了我需要动画的原点在中间之外，卡片在悬停时翻转得很好。但是，我需要在悬停时“取消翻转”。现在它只是重置而不是动画。

.oisqa-widget .flip-container:hover .flipper {
      -webkit-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -o-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-animation: flipcard 1s 0s 1 normal forwards;
      -moz-animation: flipcard 1s 0s 1 normal forwards;
      animation: flipcard 1s 0s 1 normal forwards; }

我创建了一个jsfiddle 来显示正在发生的事情

【问题讨论】：

标签： css css-animations keyframe

【解决方案1】：

不要将关键帧动画用于悬停效果刚刚删除了@keyframe css 规则并将其添加到悬停容器中，以便它会自动处理悬停效果！

这里是代码jSfiddle
全屏jsFiddle

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.oisqa-widget {
  float: left;
  width: 100%;
}
.oisqa-widget .flip-container {
  height: 170px;
}
.oisqa-widget .flip-container:hover .flipper {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(2) rotateY(180deg);
}
.oisqa-widget .flip-container {
  display: block;
  float: left;
  margin-right: 2.12766%;
  width: 31.91489%;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  perspective: 1000;
}
.oisqa-widget .flip-container:last-child {
  margin-right: 0;
}
.oisqa-widget .flipper {
  position: relative;
  transition: 0.6s;
  transform-style: preserve-3d;
}
.oisqa-widget .front,
.oisqa-widget .back {
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 170px;
  padding: 20px;
  text-align: center;
  width: 100%;
}
.oisqa-widget .front {
  background: white;
  border: 1px #c3c3c3 solid;
  border-top: 5px #1c4295 solid;
  transform: rotateY(0deg);
  z-index: 2;
}
.oisqa-widget .back {
  background: #1c4295;
  border: 1px #c3c3c3 solid;
  border-top: 5px #f4f4f4 solid;
  color: white;
  transform: rotateY(180deg);
}
.oisqa-widget .back strong {
  color: white;
}
.oisqa-widget strong {
  color: #1c4295;
}

<div class="oisqa-widget">
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <p class="question">question 1</p>
      </div>
      <div class="back">
        <p class="question">answer 1</p>
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <p class="question">question 2</p>
      </div>
      <div class="back">
        <p class="question">answer 2</p>
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <p class="question">question 3</p>
      </div>
      <div class="back">
        <p class="question">answer 3</p>
      </div>
    </div>
  </div>
</div>

【讨论】：

您的动画与问题中的动画不同。它确实按比例放大和翻转，但它仍然需要按比例缩小。也许这可以通过将该部分设置在它周围的额外元素上来完成，尽管有一些延迟。
我可以在没有关键帧的情况下进行翻转，但我希望在其中设置比例以使其具有更“真实世界”的感觉。

【解决方案2】：

这似乎有点令人费解，所以请耐心等待......

为了获得想要的效果，我使用了 3 个单独的动画，其中 2 个与您当前的翻转卡动画相同，因此您最终会得到翻转卡、翻转卡 2 和 hideAnswer。

要让翻转卡动画在两个方向上工作，您需要将翻转卡2 添加到.flipper 的初始状态，我知道这看起来很奇怪，但是悬停状态和初始状态需要使用不同名称的动画，您不能使用相同的动画而只是翻转方向。所以：

.oisqa-widget .flipper {
    position: relative;
    /*transition: 0.6s; remove this */
    transform-style: preserve-3d;
    -webkit-animation: flipcard2 1s 0s 1 reverse forwards;
    -moz-animation: flipcard2 1s 0s 1 reverse forwards;
    animation: flipcard2 1s 0s 1 reverse forwards; 
    /*note that flipcard and flipcard2 are the same but here the direction is reversed*/
}

现在，只要这样做，您的动画就会双向播放，但您的答案会在页面首次加载时显示。

为了防止在动画播放初始状态时您需要在第一秒隐藏所有内容，因此第三个动画hideAnswer：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    animation: hideAnswer 1s;
}
@keyframes hideAnswer {
    0%{opacity: 0;}
    99%{opacity: 0;}
    100%{opacity:1;}
}

现在把它们放在一起，你会得到：

Working Example on jsFiddle

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: hideAnswer 1s;
    -o-animation: hideAnswer 1s;
    -moz-animation: hideAnswer 1s;
    animation: hideAnswer 1s;
}
@-o-keyframes hideAnswer {
    0% {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity:1;
    }
}
@-webkit-keyframes hideAnswer {
    0% {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity:1;
    }
}
@-moz-keyframes hideAnswer {
    0% {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity:1;
    }
}
@keyframes hideAnswer {
    0% {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity:1;
    }
}
@-webkit-keyframes flipcard {
    0% {
        -webkit-transform: scale(1) rotateY(0);
    }
    50% {
        -webkit-transform: scale(2) rotateY(180deg);
    }
    100% {
        -webkit-transform: scale(1) rotateY(180deg);
    }
}
@-moz-keyframes flipcard {
    0% {
        -moz-transform: scale(1) rotateY(0);
    }
    50% {
        -moz-transform: scale(2) rotateY(180deg);
    }
    100% {
        -moz-transform: scale(1) rotateY(180deg);
    }
}
@-o-keyframes flipcard {
    0% {
        -o-transform: scale(1) rotateY(0);
    }
    50% {
        -o-transform: scale(2) rotateY(180deg);
    }
    100% {
        -o-transform: scale(1) rotateY(180deg);
    }
}
@keyframes flipcard {
    0% {
        transform: scale(1) rotateY(0);
    }
    50% {
        transform: scale(2) rotateY(180deg);
    }
    100% {
        transform: scale(1) rotateY(180deg);
    }
}
@-webkit-keyframes flipcard2 {
    0% {
        -webkit-transform: scale(1) rotateY(0);
    }
    50% {
        -webkit-transform: scale(2) rotateY(180deg);
    }
    100% {
        -webkit-transform: scale(1) rotateY(180deg);
    }
}
@-moz-keyframes flipcard2 {
    0% {
        -moz-transform: scale(1) rotateY(0);
    }
    50% {
        -moz-transform: scale(2) rotateY(180deg);
    }
    100% {
        -moz-transform: scale(1) rotateY(180deg);
    }
}
@-o-keyframes flipcard2 {
    0% {
        -o-transform: scale(1) rotateY(0);
    }
    50% {
        -o-transform: scale(2) rotateY(180deg);
    }
    100% {
        -o-transform: scale(1) rotateY(180deg);
    }
}
@keyframes flipcard2 {
    0% {
        transform: scale(1) rotateY(0);
    }
    50% {
        transform: scale(2) rotateY(180deg);
    }
    100% {
        transform: scale(1) rotateY(180deg);
    }
}
.oisqa-widget {
    float: left;
    width: 100%;
}
.oisqa-widget .flip-container {
    height: 170px;
}
.oisqa-widget .flip-container {
    display: block;
    float: left;
    margin-right: 2.12766%;
    width: 31.91489%;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
}
.oisqa-widget .flip-container:last-child {
    margin-right: 0;
}
.oisqa-widget .flip-container:hover .flipper {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipcard 1s 0s 1 normal forwards;
    -moz-animation: flipcard 1s 0s 1 normal forwards;
    animation: flipcard 1s 0s 1 normal forwards;
}
.oisqa-widget .flipper {
    position: relative;
    /*transition: 0.6s; remove this */
    transform-style: preserve-3d;
    -webkit-animation: flipcard2 1s 0s 1 reverse forwards;
    -moz-animation: flipcard2 1s 0s 1 reverse forwards;
    animation: flipcard2 1s 0s 1 reverse forwards;
}
.oisqa-widget .front, .oisqa-widget .back {
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 170px;
    padding: 20px;
    text-align: center;
    width: 100%;
}
.oisqa-widget .front {
    background: white;
    border: 1px #c3c3c3 solid;
    border-top: 5px #1c4295 solid;
    transform: rotateY(0deg);
    z-index: 2;
}
.oisqa-widget .back {
    background: #1c4295;
    border: 1px #c3c3c3 solid;
    border-top: 5px #f4f4f4 solid;
    color: white;
    transform: rotateY(180deg);
}
.oisqa-widget .back strong {
    color: white;
}
.oisqa-widget strong {
    color: #1c4295;
}

<div class="oisqa-widget">
    <div class="flip-container">
        <div class="flipper">
            <div class="front">
                <p class="question">question 1</p>
            </div>
            <div class="back">
                <p class="question">answer 1</p>
            </div>
        </div>
    </div>
    <div class="flip-container">
        <div class="flipper">
            <div class="front">
                <p class="question">question 2</p>
            </div>
            <div class="back">
                <p class="question">answer 2</p>
            </div>
        </div>
    </div>
    <div class="flip-container">
        <div class="flipper">
            <div class="front">
                <p class="question">question 3</p>
            </div>
            <div class="back">
                <p class="question">answer 3</p>
            </div>
        </div>
    </div>
</div>

【讨论】：