Why does css3 hover effect jump when mouse move and reverse on click?

Question

I have a box that is flat on load but rotates on hover. Setup:

<div class="work-box">
     <div class="face primary">
          <div class="work-name">The library</div>
          <div class="blue"></div>
     </div>
     <div class="face secondary">                   
          <div class="cover" data-workid="69"></div>
          <div class="red"></div>
     </div>
</div>

working example: http://jsfiddle.net/74ccbpke/

My issues when the mouse moves the animation flickers. Also when I click the mouse the animation resets on mouse down and returns on mouse up.

Answer 1

You could add an extra container around the work-box that doesn't move, and let this one react to the hovering.

http://jsfiddle.net/willemvb/mszfzrvd/

HTML

<div class="work-box-container">
    <div class="work-box">
        ...
    </div>
</div>

CSS

.work-box-container:hover .work-box{
    ...
}