css - Position 属性的过渡动画

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代码就好了)