CSS动画故障，悬停

Question

我有一个悬停动画故障。当你靠近物品的底部时，它会无法控制地跳跃，是否有任何修复？

示例图片：

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

Answer 1

只需在.btn

上设置transition即可

.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);
  }

样本

＆＃13;

＆＃13;

.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);
  }

＆＃13;

<div class=btn > HOVER ME </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

跳转是由CSS定义中的translate属性引起的。

如果跳转是意外的，您只需将其从CSS定义中删除即可：

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

或者您可以将CSS分成两部分：

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

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

Answer 3

删除你的btn.hover并只写btn，因为当你的按钮（.btn）上出现鼠标指针时，悬停就会发生。所以删除它。

并写

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

Answer 4

基本上你的按钮只是上升：悬停，但它上升的距离使你的按钮离开：悬停状态，它下降。当它下降时，它再次进入光标并进入：悬停状态。

取决于您想要实现的目标，但不是在悬停时实际移动按钮，只需更改它的背景颜色即可。您会发现人们无法真正点击它。或者只是添加一个大的填充底部，这样当按钮上升时，光标仍然保持在：悬停状态。