按钮hover上移时top属性ease过渡1秒设置不生效如何解决

问题原因 #

• 缺失top属性初始值
  CSS过渡动画要求变化的属性必须存在明确的起始值和结束值才能生效。你仅在:hover伪类中声明了top: -10px，但未给按钮的默认状态设置top: 0的初始值，浏览器无法计算两个状态的差值过渡，因此会直接跳变没有缓动效果。
• display属性取值无效
  你写的display: inline-auto不是CSS的合法属性值，浏览器会直接忽略该条规则，建议修正为合法的display: inline-block避免潜在布局异常。

修复后代码示例 #

#talk-to-us {
    padding: 10px!important; 
    height: 43px!important;
    width: 148px!important;
    background-color: #0ee9f5!important;
    display: inline-block!important; /* 修正无效取值 */
    margin-right: 5px;
    position: relative;
    top: 0; /* 补充top初始值 */
    transition: top ease 1.0s;
}
#talk-to-us:hover {
    top: -10px;
    text-decoration:underline;
}

#link {
    color: white!important;
    font-size: 14px!important; 
    padding: 10px!important;
}

内容的提问来源于stack exchange，提问作者overlord