CODEWITHSUNDEEP
htmlcsscss-animationsfadetranslate
theCrabNebula
theCrabNebula

Reputation: 831

Way to fade in an element while moving down/translating from the top?

I'm trying to figure out a way to have the first header and paragraph of a specific web page to simultaneously translate into place from the top while fading in.

I've looked into using @keyframes, which definitely seems like the solution. But with that said, I haven't been able to figure out a way to translate the elements without specifying a set distance to translate. Instead, I simply want to translate the elements from the top, into their current place (or where they would otherwise be).

Here is my site for reference: http://thefloodplains.com/About.html. I currently have the second section to Fade In (with no translation), but I want the top section to fade in from the top.

Basically what I want to do is this: https://www.w3schools.com/CSSref/tryit.asp?filename=trycss3_keyframes, but without a specified amount of pixels to translate - I simply want to translate it from the top into its current location.

Here is another similar example, but I don't want a fade-out effect (the first one): https://codepen.io/kianoshp/pen/PPeWzb.

@keyframes topFadeOut {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    top: 25%;
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

Any and all help would be deeply appreciated. Have a wonderful day!

Upvotes: 2

Views: 1515

Answers (1)

Anil Suwal Qode
Anil Suwal Qode

Reputation: 120

.box {
  height: 20rem;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

@keyframes topFadeOut {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  100% {
    position: absolute;
    top: 25%;
    opacity: 1;
  }
}

h {
  font-size: 45px;
  color: #00A5D1;
  font-family: 'Gentium Basic', Verdana, 'Slabo 27px', 'Vollkorn', serif;
  position: absolute;
  top: 5rem;
  opacity: 1;
  left: 0;
  right: 0;  
  display: flex;
  justify-content: center;
  animation-name: topFadeOut;
  animation-duration: 5s;
}
  <section class="box">
    <h>The Floodplains</h>
  </section>

Upvotes: 1

Related Questions