在相对定位 div css 上动画顶部 属性

Question

我试图在另一个 div 内的相对 div 上设置 top 属性 的动画。当我将鼠标悬停在页脚上时， top 属性 被触发但没有动画。想不通为什么动画不播放

我把这个问题写了笔，在这里查看here。

CSS

footer {
  background-color: #f2f2f2;
  text-align: center;
  color: black;
}
footer:hover .f-first {
  top: 5vh;
}
footer div {
  position: relative;
  transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1) 0.1s;
}

Answer 1

您需要为您的非悬停元素提供一个要转换的起始 top 位置：

Codepen

.f-first {
  top: 0vh;
}

完整 SCSS：

footer {
  background-color: darken(white, 5%);
  text-align: center;
  color: black;
  .f-first {
     top: 0vh;
  }
  &:hover {
    .f-first {
      top: 5vh;
    }
    .f-second {
    }
    .f-third {
    }
  }
  div {
    position: relative;
    transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1) 0.1s;
  }
}