Css 为什么我的反应按钮转换不起作用？

我在React应用程序中使用样式化组件来设置按钮的动画，使其在悬停时向上移动5px。它确实向上移动，但过渡并不顺利。有人知道如何解决这个问题吗

CSS:

---

这是使用

转换时的常见问题。将以下内容添加到正常状态，并且您的代码缺少一个
转换
属性：

transition: all 0.5s linear;
top: 0;

因此，CSS将知道在
0px
和
-5px
之间设置动画

您的完整代码应为：

const UpButton=styled.button`
字体系列：“Avenir”；
高度：3em；
宽度：3em；；
颜色：白色；
边框：2倍纯白；
背景：#1d20；
字号：1em；
位置：相对位置；
浮动：对；
过渡：所有0.5s线性；
排名：0；
&：悬停{
顶部：-5px；
光标：指针；
}
`;

您可以在这里看到工作和差异：


按钮{
高度：3em；
宽度：3em；
颜色：白色；
边框：2倍纯白；
背景：#1d20；
字号：1em；
位置：相对位置；
浮动：左；
过渡：所有0.5s线性；
}
按钮顶部{
排名：0；
}
按钮。顶部：悬停，
按钮：悬停{
顶部：-5px；
光标：指针；
}
无顶




带顶部
transition: all 0.5s linear;
top: 0;