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）你需要一个与你试图在你的悬停规则中设定动画的值相对应的值，如下所示：

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代码会很好）

位置属性上的过渡动画

1 个答案: