CODEWITHSUNDEEP
htmlcsscss-transitionscss-animations
Jochim
Jochim

Reputation: 110

Animate top property on relative positioned div css

I tried to animate the top property on a relative positioned div inside another div. When I hover over the footer the top property is triggered but not animated. I can't figure out why the animation doesn't play.

I made a pen of the issue, view it here 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;
}

Upvotes: 0

Views: 1231

Answers (1)

Derek Story
Derek Story

Reputation: 9593

You need to give your non hovered element a starting top position to be transitioned:

Codepen

.f-first {
  top: 0vh;
}

Full 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;
  }
}

Upvotes: 4

Related Questions