Using CSS for a fade-in effect on page load

Question

Can CSS transitions be used to allow a text paragraph to fade-in on page load   I really like how it looked on http   dotmailapp com  and would love to use a similar effect using CSS  The domain has since been purchased and no longer has the effect mentioned  An archived copy can be viewed on the Wayback Machine   Illustration  Having this markup    lt div id  test  gt       lt p gt  This is a test lt  p gt   lt  div gt                                                          With the following CSS rule    test p       opacity  0      margin-top  25px      font-size  21px      text-align  center      -webkit-transition  opacity 2s ease-in      -moz-transition  opacity 2s ease-in      -o-transition  opacity 2s ease-in      -ms-transition  opacity 2s ease-in      transition  opacity 2s ease-in       How can the transition be triggered on load

User · Answer

Looking forward to Web Animations in 2020.

_x000D_

async function moveToPosition(el, durationInMs) {
  return new Promise((resolve) => {
    const animation = el.animate([{
        opacity: '0'
      },
      {
        transform: `translateY(${el.getBoundingClientRect().top}px)`
      },
    ], {
      duration: durationInMs,
      easing: 'ease-in',
      iterations: 1,
      direction: 'normal',
      fill: 'forwards',
      delay: 0,
      endDelay: 0
    });
    animation.onfinish = () => resolve();
  });
}

async function fadeIn(el, durationInMs) {
  return new Promise((resolve) => {
    const animation = el.animate([{
        opacity: '0'
      },
      {
        opacity: '0.5',
        offset: 0.5
      },
      {
        opacity: '1',
        offset: 1
      }
    ], {
      duration: durationInMs,
      easing: 'linear',
      iterations: 1,
      direction: 'normal',
      fill: 'forwards',
      delay: 0,
      endDelay: 0
    });
    animation.onfinish = () => resolve();
  });
}

async function fadeInSections() {
  for (const section of document.getElementsByTagName('section')) {
    await fadeIn(section, 200);
  }
}

window.addEventListener('load', async() => {
  await moveToPosition(document.getElementById('headerContent'), 500);
  await fadeInSections();
  await fadeIn(document.getElementsByTagName('footer')[0], 200);
});

_x000D_

body,
html {
  height: 100vh;
}

header {
  height: 20%;
}

.text-center {
  text-align: center;
}

.leading-none {
  line-height: 1;
}

.leading-3 {
  line-height: .75rem;
}

.leading-2 {
  line-height: .25rem;
}

.bg-black {
  background-color: rgba(0, 0, 0, 1);
}

.bg-gray-50 {
  background-color: rgba(249, 250, 251, 1);
}

.pt-12 {
  padding-top: 3rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.text-lightGray {
  color: lightGray;
}

.container {
  display: flex;
  /* or inline-flex */
  justify-content: space-between;
}

.container section {
  padding: 0.5rem;
}

.opacity-0 {
  opacity: 0;
}

_x000D_

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Web site created using create-snowpack-app" />
  <link rel="stylesheet" type="text/css" href="./assets/syles/index.css" />
</head>

<body>
  <header class="bg-gray-50">
    <div id="headerContent">
      <h1 class="text-center leading-none pt-2 leading-2">Hello</h1>
      <p class="text-center leading-2"><i>Ipsum lipmsum emus tiris mism</i></p>
    </div>
  </header>
  <div class="container">
    <section class="opacity-0">
      <h2 class="text-center"><i>ipsum 1</i></h2>
      <p>Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue</p>
    </section>
    <section class="opacity-0">
      <h2 class="text-center"><i>ipsum 2</i></h2>
      <p>Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue</p>
    </section>

    <section class="opacity-0">
      <h2 class="text-center"><i>ipsum 3</i></h2>
      <p>Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue</p>
    </section>
  </div>
  <footer class="opacity-0">
    <h1 class="text-center leading-3 text-lightGray"><i>dictum non ultricies eu, dapibus non tellus</i></h1>
    <p class="text-center leading-3"><i>Ipsum lipmsum emus tiris mism</i></p>
  </footer>
</body>

</html>

_x000D_

User · Answer

In response to  A M K s question about how to do transitions without jQuery  A very simple example I threw together  If I had time to think this through some more  I might be able to eliminate the JavaScript code altogether    lt style gt      body           background-color  red          transition  background-color 2s ease-in         lt  style gt    lt script gt      window onload   function             document body style backgroundColor     00f          lt  script gt    lt body gt       lt p gt test lt  p gt   lt  body gt

User · Answer

You can use the onload    HTML attribute and use JavaScript to adjust the opacity style of your element   Leave your CSS as you proposed  Edit your HTML code to    lt body onload  document getElementById test  style opacity  1   gt       lt div id  test  gt           lt p gt  This is a test lt  p gt       lt  div gt   lt  body gt    This also works to fade-in the complete page when finished loading   HTML    lt body onload  document body style opacity  1   gt   lt  body gt    CSS   body       opacity  0      transition  opacity 2s      -webkit-transition  opacity 2s     Safari        Check the W3Schools website  transitions and an article for changing styles with JavaScript

User · Answer

Method 1   If you are looking for a self-invoking transition then you should use CSS nbsp 3 Animations  They aren t supported either  but this is exactly the kind of thing they were made for   CSS   test p       margin-top  25px      font-size  21px      text-align  center       -webkit-animation  fadein 2s     Safari  Chrome and Opera  gt  12 1           -moz-animation  fadein 2s     Firefox  lt  16            -ms-animation  fadein 2s     Internet Explorer             -o-animation  fadein 2s     Opera  lt  12 1                animation  fadein 2s      keyframes fadein       from   opacity  0        to     opacity  1          Firefox  lt  16     -moz-keyframes fadein       from   opacity  0        to     opacity  1          Safari  Chrome and Opera  gt  12 1     -webkit-keyframes fadein       from   opacity  0        to     opacity  1          Internet Explorer     -ms-keyframes fadein       from   opacity  0        to     opacity  1          Opera  lt  12 1     -o-keyframes fadein       from   opacity  0        to     opacity  1        Demo   http   jsfiddle net SO AMK VV2ek    Browser Support  All modern browsers and Internet nbsp Explorer nbsp 10  and later   http   caniuse com  feat css-animation    Method 2   Alternatively  you can use jQuery  or plain JavaScript  see the third code block  to change the class on load   jQuery      test p   addClass  load       CSS   test p       opacity  0      font-size  21px      margin-top  25px      text-align  center       -webkit-transition  opacity 2s ease-in         -moz-transition  opacity 2s ease-in          -ms-transition  opacity 2s ease-in           -o-transition  opacity 2s ease-in              transition  opacity 2s ease-in      test p load       opacity  1      Plain JavaScript  not in the demo   document getElementById  test   children 0  className      load     Demo   http   jsfiddle net SO AMK a9dnW    Browser Support  All modern browsers and Internet nbsp Explorer nbsp 10  and later   http   caniuse com  feat css-transitions    Method 3   Or  you can use the method that  Mail uses   jQuery      test p   delay 1000  animate   opacity  1    700      CSS   test p       opacity  0      font-size  21px      margin-top  25px      text-align  center      Demo   http   jsfiddle net SO AMK a9dnW 3    Browser Support  jQuery 1 x  All modern browsers and Internet nbsp Explorer nbsp 6  and later   http   jquery com browser-support   jQuery 2 x  All modern browsers and Internet nbsp Explorer nbsp 9  and later   http   jquery com browser-support   This method is the most cross-compatible as the target browser does not need to support CSS nbsp 3 transitions or animations

[css] Using CSS for a fade-in effect on page load

Examples related to css

Examples related to css-transitions

Examples related to opacity