在相对定位的 div css 上为顶部属性设置动画答案

【问题标题】：Animate top property on relative positioned div css在相对定位的 div css 上为顶部属性设置动画
【发布时间】：2015-12-11 18:40:10
【问题描述】：

我尝试在另一个 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;
}

【问题讨论】：

标签： html css css-transitions css-animations

【解决方案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;
  }
}

【讨论】：