位置上的过渡动画属性

Question

我正在尝试为属性位置设置动画，但似乎无法正常工作。

非悬停CSS是：

background: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0;
width: 100%;
-webkit-transition: all 1s ease;
        transition: all 1s ease;

悬停是：

top: 0;
-webkit-transition: all 1s ease;
        transition: all 1s ease;

动画没有播放。我在这里忘记了什么？

Answer 1

1) 你只需要基本规则中的过渡（不需要再在 :hover 规则中） 2）你需要一个对应于你在你的 :hover 规则中尝试动画的值，像这样：

https://jsfiddle.net/svArtist/70yw60b7/

#hoverme {
    background: rgba(255, 0, 0, 0.7);
    height:100px;
    position: absolute;
    top:50px;  /* THIS value will be animated to "0px" on hover   */
    width: 100%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
#hoverme:hover {
    top: 0px;  /*   magic happening here   */
}

没有关于应该从哪个位置更改什么的任何进一步信息，这是我们所能提供的帮助。（相关的 HTML 代码会很好）

位置上的过渡动画属性

Transition Animation on Position Property

css

css-transitions

css-animations

位置上的过渡动画 属性

Transition Animation on Position Property

css

css-transitions

css-animations

位置上的过渡动画属性