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