Avoiding Repetition

 section.landing-page .first-dohickey {
   animation: fade-in 1s;
 }
 section.landing-page .second-dohickey {
   animation: flash-in 1s;
 }
 section.landing-page .third-dohickey {
   animation: swirl-in 1s;
 }
 section:not(.landing-page):target ~ section.landing-page .first-dohickey {
   animation: fade-out 1s;
 }
 section:not(.landing-page):target ~ section.landing-page .second-dohickey {
   animation: flash-out 1s;
 }
 section:not(.landing-page):target ~ section.landing-page .third-dohickey {
   animation: swirl-out 1s;
 }

Problem: That's confusing and hard to change. Imagine writing this for multiple pages (not just the landing page), then discovering you need to change the section:not(.landing-page):target ~ section.landing-page selector? Eugh.

Alternative: set/unset a CSS custom property once for the top level selector, and use it inside each of the .*-dohickey selectors.

 section.landing-page {
   --when-animating-in: unset;
   --when-animating-out: none;
 }

 section:not(.landing-page):target ~ section.landing-page {
   --when-animating-in: none;
   --when-animating-out: unset;
 }

 .first-dohickey {
   animation:
     var(--when-animating-in, fade-in 1s),
     var(--when-animating-out, fade-out 1s);
 }

 .second-dohickey {
   animation:
     var(--when-animating-in, flash-in 1s),
     var(--when-animating-out, flash-out 1s);
 }

 .third-dohickey {
   animation:
     var(--when-animating-in, swirl-in 1s),
     var(--when-animating-out, swirl-out 1s);
 }

We have now separated the business of deciding when to animate in or out with the business of how to animate in or out.

See it in action

In your developer tools, search for docs_link_31919bf0 to find the relevant CSS rules running this site.

Changing Pages

 <div class="page" id="page-1">
   Page 1 content
 </div>
 <div class="page" id="page-2">
   Page 2 content
 </div>
 <div class="page" id="home-page">
   Home page content
 </div>

Problem: How do you show only one page, and hide the rest? How do you link to one page in particular?

 .page:not(:target) {
   display: none;
 }

 <a href="#page-1">Page 1</a>

Problem: How do you show a home page when there is no URL hash?

 .page:target ~ #home-page,
 .page:not(#home-page):not(:target) {
   display: none;
 }

See it in action

In your developer tools, search for docs_link_afcd9582 to find the relevant CSS rules running this site.

Why does the site code set CSS custom properties instead of display: none? Find out in Avoiding Repetition.

Page Animations

 <div class="page" id="page-1">
   Page 1 content
 </div>
 <div class="page" id="page-2">
   Page 2 content
 </div>
 <div class="page" id="home-page">
   Home page content
 </div>

 #home-page,
 .page:target {
   animation: fade-in 1s;
 }

 .page:target ~ #home-page,
 .page:not(#home-page):not(:target) {
   animation: fade-out 1s;
 }

 @keyframes fade-in {
   from { opacity: 0; } 
   to { opacity: 1; }
 }

 @keyframes fade-out {
   from { opacity: 1; }
   to { opacity: 0; }
 }

When a page is no longer :targeted, it animates out. The next page that is :targeted is, in turn, animated in. (Refer to Changing Pages for an explanation of the #home-page stuff.)

Problem: when the page first loads, all but one page are not :targeted, so they animate out. Except that the page must be visible to animate out. The result is that every page is visible and overlaid one above the other, while all but one animates out. (demo of this behaviour.)

 :root {
   --hidden-while-initializing: hidden;
   animation: initialize 1s steps(1, end);
 }

 @keyframes initialize {
   to {
     --hidden-while-initializing: unset;
   }
 }

 document.addEventListener('DOMContentLoaded', () => {
   const initializationDelay = 1000
   setTimeout(() => {
     const rootStyle = document.documentElement.style
     rootStyle.removeProperty('--hidden-when-initializing')
     // also you can use:
     //   rootStyle.setProperty('--property-name', 'value')
     // if there are custom properties whose values you want to
     // change after the initialization delay
   }, initializationDelay)
 })

My first attempt involved using the approach described in DRYing up complex queries to change the value of animations based on the value of --hidden-while-initializing. (To do this, --hidden-while-initializing would have to start as none instead of hidden)

That can't work, because as soon as the value of animations changes, the new animation runs -- so all we're doing is delaying that flash of all the pages animating out.

 @keyframes fade-out {
   from {
     visibility: var(--hidden-while-initializing, visible);
     opacity: 1;
   }

   to {
     visibility: var(--hidden-while-initializing, visible);
     opacity: 0;
   }

See it in action

In your developer tools, search for docs_link_755def49 to find the relevant CSS rules running this site.