CODEWITHSUNDEEP
htmlcss
Eric ERK
Eric ERK

Reputation: 369

CSS Animation Glitch, on hover

I have an over hover animation glitch. When you're near the bottom of the item, it jumps, uncontrollably, is there any fix?

Sample image :

enter image description here

.btn:hover{
    background-color: #2795de;  
    -moz-transform: translate(0, -1.3em);
    -o-transform: translate(0, -1.3em);
    -webkit-transform: translate(0, -1.3em);
}

Upvotes: 2

Views: 3789

Answers (4)

Daniel
Daniel

Reputation: 1155

Basically your button is only going up on :hover but the distance that it goes up puts your button out of :hover state and it goes down. When it goes down it goes under the cursor again and goes into :hover state.

depending on what you want to achieve but instead of actually moving your button up on hover just change the background-color of it. You'll find people will be unable to actually click on it. Or just add a large padding-bottom so when button goes up the cursor still stays in :hover state.

Upvotes: 0

hardwork
hardwork

Reputation: 781

remove your btn.hover and write only btn because hover is take event when your mouse cuser comes up on your button(.btn). so remove it.

and write 

`.btn{
  background-color:#2795de; 
 -moz-transform:translate(0,-1.3em);
 -o-transform:translate(0,-1.3em);
 -webkit-transform:translate(0,-1.3em);
  }`

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

Just set transition on .btn

.btn{
 -moz-transition: all 2s ease;
 -o-transition: all 2s ease;
 -webkit-transition: all 2s ease;
  }

 .btn:hover{
  background-color:#2795de; 
 -moz-transform:translate(0,-1.3em);
 -o-transform:translate(0,-1.3em);
 -webkit-transform:translate(0,-1.3em);
  }

DEMO

.btn{
  width:200px;
  height:200px;
  border-radius:4px;
  background: red;
 -moz-transition: all 2s ease;
 -o-transition: all 2s ease;
 -webkit-transition: all 2s ease;
  }

 .btn:hover{
  background-color:#2795de; 
 -moz-transform:translate(0,-1.3em);
 -o-transform:translate(0,-1.3em);
 -webkit-transform:translate(0,-1.3em);
  }
<div class=btn > HOVER ME </div>

Upvotes: 2

Manish Kr. Shukla
Manish Kr. Shukla

Reputation: 4477

The jump is being caused by the translate property in your CSS definitions.

If the jump is unintended, you can simply remove it from your CSS definition : 

    .btn:hover{
          background-color:#2795de; 
    /*   -moz-transform:translate(0,-1.3em);
         -o-transform:translate(0,-1.3em);
         -webkit-transform:translate(0,-1.3em); */
    }

Or you can split the css into two parts : 

    .btn{
         -moz-transform:translate(0,-1.3em);
         -o-transform:translate(0,-1.3em);
         -webkit-transform:translate(0,-1.3em); 
    }

    .btn:hover {
          background-color:#2795de; 
    }

Upvotes: 0

Related Questions