How to load content in fade (Only CSS)

demo load content in fade If you want to load content in your blog like this
Let’s try:

@keyframes load-fade-in {
    from {
      opacity: 0.3;
      transform: translateY(10vh);
    }
  }

 @media (prefers-reduced-motion: no-preference) {
  /* Set for all children elements in page */
  /* Include text, images */
    p {
      view-timeline-name: --item-timeline;
      animation-timeline: --item-timeline;
      animation: load-fade-in both;
      animation-range: contain 0% contain 40%;
    }
 }

prefers-reduced-motion: no-preference: Support for almost mobile devices has reduced motion in setting.