Aug 30 2023 08:26 — 1 min read

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.

lightsbee avatar

Hope you have a great day! I'm lightsbee — A Product Manager and also lover of Personal Knowledge Management. You can see my works, or read more about my sharing knowledge on blogs and reach about to know me better.