Visual issue with css3 animation and jquery (hover flip card)

Question

Read me: --> Im having troubles when I hover the flip card, if you move the cursor while hovering inside the div is triggering continuously and it makes an annoying effect, so here is what I need:

1) I want to hover the flip card and dont trigger animation again even you move the cursor inside while hovering.

2) I also need center p tag vertically in the flip card, margin-top is working and margin:auto is not working, I put the 2 examples in the snippet, check next classes:

.card .front p {
    margin-top: 100px;
}
.card .back p {
    margin: auto;
}

So why is not working margin:auto ? I wont use margin-top, need the content at the center. Here is the working snippet code:

Updated question: I also need achieve the next: one time you hover the flip card the animation must be completed, even you hover out the div, and then flip to the original position again, I tried next but it doesnt work:

$(".container").hover(function(){
            $(this).find(".card").toggleClass('flipped')
        }, function(){
            setTimeout(function(){ 
                $(this).find(".card").toggleClass('flipped')
            }, 1000);
    });

 $(document).ready(function () { $(".card").hover(function(){ $(this).toggleClass('flipped') }, function(){ $(this).toggleClass('flipped') }); }) 

 .container { width: 200px; height: 260px; position: relative; margin: 0 auto 40px; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; display: inline-block; } #main{ border: 1px solid black; } button{ width: 30%; height: 10%; margin-top: 100px; cursor: default; } .card { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } .card.flipped { -webkit-transform: translateX( -100%) rotateY( -180deg); -moz-transform: translateX( -100%) rotateY( -180deg); -o-transform: translateX( -100%) rotateY( -180deg); transform: translateX( -100%) rotateY( -180deg); } .card div { height: 100%; width: 100%; color: white; text-align: center; font-weight: bold; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; cursor:pointer; } .card .front { background: red; } .card .front p { margin-top: 100px; } .card .back p { margin: auto; } .card .back { background: blue; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <div id="main"><br> <section class="container"> <div class="card"> <div class="front"><p>Test</p></div> <div class="back"> <p>MyBack</p> </div> </div> </section> </div> </div> 

Answer 1

the problem comes from the fact that because you are transforming the element that has got the hover, it pointer may get out the box, causing unwanted change of state from hover to none and back again...

You could catch the hover event on the main div. To center the vertically elements, the simple way is to use CSS Flexbox .
margin: auto will not work since it sets margin-top and margin-bottom to 0 by default.

Here are the changes I've made :

$(document).ready(function() {
  $(".container").hover(function() {
    $(".card").toggleClass('flipped')
  }, function() {
    $(".card").toggleClass('flipped')
  });
})

.card .back {
  /*no changes*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .front {
  /*no changes*/
  display: flex;
  justify-content: center;
  align-items: center;
}

And a working example :

 $(document).ready(function() { $(".container").hover(function() { $(".card").toggleClass('flipped') }, function() { $(".card").toggleClass('flipped') }); }) 

 h1 { text-align: center; } .container { width: 200px; height: 260px; position: relative; margin: 0 auto 40px; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; display: inline-block; } #main { border: 1px solid black; } button { width: 30%; height: 10%; margin-top: 100px; cursor: default; } .card { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } .card.flipped { -webkit-transform: translateX( -100%) rotateY( -180deg); -moz-transform: translateX( -100%) rotateY( -180deg); -o-transform: translateX( -100%) rotateY( -180deg); transform: translateX( -100%) rotateY( -180deg); } .card div { height: 100%; width: 100%; color: white; text-align: center; font-weight: bold; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; } .card .front { background: red; display: flex; justify-content: center; align-items: center; } /* .card .front p { margin-top: 100px; } */ .card .back p { margin: auto; } .card .back { background: blue; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); display: flex; justify-content: center; align-items: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <div id="main"><br> <section class="container"> <div class="card"> <div class="front"> <p>Test</p> </div> <div class="back"> <p>MyBack</p> </div> </div> </section> </div> </div> 

How about it ?