title: Choppy animation using html & css Only rotate: Y axis
body: <p>I'm trying to replicate a cool aspect I saw on a youtube video where you have two divs with seperate content on each side and use the rotate y axis to spin them around and show the reverse. So far this is only using html and css.</p>
  
  <p>I have set "reverse side visibility to hidden as shown on the youtube video" the actual animation works great and looks great but theres a slight bug when you hover over the content and then go back over it just before it has done a full rotation the previous side jumps through and sort of ruins the effect. </p>
  
  <p>I have tried adding an animation with blur to cover it up which while it looks good and adds to the effect of the flip it still doesn't help my problem, I've tried lots of ideas but it still hasn't helped. I've tried adding overflow hidden to all four aspects which helped a little but it still ruins the whole aesthetics of having an animation if it looks weird...  </p>
  
  <p>Does anyone know a fix for this problem.... 
  the html code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.front {
    background: -webkit-linear-gradient(left,#91043c,teal);
    background: -moz-linear-gradient(right,#91043c,teal);
    background: -o-linear-gradient(right,#91043c,teal);
    background: linear-gradient(left,#91043c,teal); 
    margin:0.2% 0.2% 0.2% 0.2%;
    border-radius:10px;
    height:132px;     
    width:22.2%;
    transform: perspective(600px) rotateY(0deg);
    transition: transform 0.87s linear 0s;
    backface-visibility:hidden;   
    position: absolute;
  }
  .Bx:hover &gt; .front {
    transform: perspective(600px) rotateY( -180deg);
    overflow: hidden;
    -webkit-animation: CardsAnime 0.88s infinite 0s;
    -moz-animation: CardsAnime 0.88s infinite 0s;
    -o-animation: CardsAnime 0.88s infinite 0s;
    animation: CardsAnime 0.88s infinite 0s;     
  }
  @keyframes CardsAnime {
    20%{z-index: 1; box-shadow:2px 0px 2px 1px rgba(0,149,255,2)}
    40%{z-index: 1; box-shadow:8px 0px 2px 2px rgba(0,149,255,4)}
    60%{z-index: 1; box-shadow:4px 0px 2px 2px rgba(0,149,255,6)}
    80%{z-index: 1; box-shadow:8px 0px 4px 2px rgba(8,255,245,4)}
    100%{z-index: 1; box-shadow:2px 0px 4px 1px rgba(12,235,222,2)}
  }
  .back {
    background: -webkit-linear-gradient(left,teal,#91043c);   
    background: -moz-linear-gradient(right,teal,#91043c);
    background: -o-linear-gradient(right,teal,#91043c); 
    background: linear-gradient(left,teal,#91043c);
    transform: perspective(600px) rotateY(180deg);
    transition: transform 0.87s linear 0s;
    backface-visibility:hidden;   
    position: absolute;overflow:hidden; 
    margin:0.2% 0.2% 0.2% 0.2%;
    border-radius:12px;
    width:21.2%;
    height:132px;
  }
  .Bx:hover &gt; .back {
    transform: perspective(600px) rotateY( 0deg);
    overflow: hidden;
    float:left;
    -webkit-animation: CardsAnime2 0.88s linear 0.12s;
    -moz-animation: CardsAnime2 0.88s linear 0.12s;
    -o-animation: CardsAnime2 0.88s linear 0.12s;
    animation: CardsAnime2 0.88s linear 0.12s;
  }
  @keyframes CardsAnime2 { 
    20%{filter:blur(4px);}
    40%{filter:blur(8px);}
    80%{filter:blur(4px);}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;wrapper id="Cards"&gt;
    &lt;div id="Box1" class="s3D"&gt;
       &lt;div class="Bx"&gt;
           &lt;div class="Box1 Flip3D front"&gt;Content1&lt;/div&gt; 
           &lt;div class="Box1 Flip3D back"&gt;Info Back&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/wrapper&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm still very new to coding (3 weeks in) and have searched, but its too
  long a question to put in google and i only find very vague answers on the threads i find on here. Or closest I've found is a totally different question using jquery and javascript. and other code There must be a css answer? Maybe.. Any help would be amazing.</p>