css - 如何在悬停时反转关键帧？

Question

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

.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显示正在发生的事情

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