在相对定位的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;
  }
}