html - 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

刚刚设置transition在 .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);
  }

演示

.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>