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

时间：2014-09-24 21:00:38

标签： css css3 css-animations keyframe

我正在使用关键帧处理卡片翻转动画。除了我需要动画的原点在中间的事实，卡在悬停时翻转。但是，我需要＆＃34;解开＆＃34;在徘徊。现在它只是重置而不是动画。

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

2 个答案:

答案 0 :(得分：0)

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

  • 以下是代码jSfiddle

  • for FullScreen 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>

答案 1 :(得分：0)

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

为了获得理想的效果，我使用了3个单独的动画，其中2个与您当前的动态卡片动画相同，因此您最终会使用flipcard，flipcard2和hideAnswer。

要让flipcard动画在两个方向上工作，你需要将flipcard2添加到初始状态.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*/
}

现在只需执行此操作即可使动画向两个方向移动，但您的答案将在页面首次加载时显示。

为了防止在动画播放初始状态时你需要隐藏第一秒的所有内容，因此第3个动画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

＆＃13;
＆＃13; 
* {
    -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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题