How can I reverse keyframe on hover off? - css

Question

I'm working on a card flip animation using keyframes. Aside from the fact I need the origin of the animation to be in the middle, the card flips fine on hover. However, I need to "unflip" on hover off. Right now it's just resetting and not animating.
.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; }
I've created a jsfiddle to show what's happening

Answer 1

Dont use keyframe animation for hover effects Just removed #keyframe css rules and added it inside containers on hover so that it will automatically handles hover off effect!
Here is the code 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>

Answer 2

This will seem a little convoluted so bear with me...
To get the desired effect I used 3 separate animations, 2 of which are the same as your current flipcard animation, so you'll end up with flipcard, flipcard2, and hideAnswer.
To get the flipcard animation to work in both directions you'll need to add flipcard2 to the initial state of .flipper, I know this seems odd, but the hover state and the initial state need to use animations with different names, you can't use the same animation and just flip the direction. So:
.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*/
}
Now just doing this will get your animation going in both directions, but your answers will show when the page first loads.
To prevent that you'll need to hide everything for the first second while the animation plays through on the initial state, hence the 3rd animation 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;}
}
Now put it all together and you'll get:
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>