日本語

How to use & FAQ

Using the Page Transition CSS Gallery, and answers to common questions

🖱️ Getting started

  1. Click the mini screen inside a card, or the ▶ Play button, to run the animation in place
  2. Narrow things down with the category chips — 20 curtains, 10 page transitions, 12 loading screens
  3. When you find one you like, hit HTML+CSS+JS to copy it. Clicking a card shows the full code in the sidebar
  4. Change the accent and secondary colors in the sidebar — the preview and the copied code both update, and your choice is saved
  5. ▶ Play all shown runs every visible card in turn, slightly staggered

🎭 How the three categories differ

They differ not just in looks but in what triggers them, and the copied JavaScript changes to match.

🧩 Adding a page transition to your site

  1. Move the contents of the copied <style> into your CSS file
  2. Put the veil markup (<div class="pt-...">) directly inside <body>
  3. Move the contents of the copied <script> into your JS file
  4. Include the same set on every page — it closes on the page you leave and opens on the page you arrive at

The veil starts closed. Opening it right after load is what makes the journey read as one continuous motion.

<!-- Directly inside body. Never nest it in a parent that has a transform -->
<div class="pt-split-x" aria-hidden="true"><i></i><i></i></div>
<noscript><style>.pt-split-x { display: none; }</style></noscript>

⚡ Writing it with the View Transitions API

For same-origin navigation you can skip JavaScript entirely in supporting browsers. The visual CSS from this tool carries straight over.

@view-transition { navigation: auto; }

::view-transition-new(root) {
  animation: pt-open 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
@keyframes pt-open {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

It is far shorter, but unsupported browsers simply skip the effect (navigation still works normally). Use the JavaScript approach from this tool when you need it to run everywhere.

❓ FAQ

Q. How do I use the copied code?
A. You get CSS, HTML and JavaScript as a set. Paste it as-is first to confirm the animation, then move the <style> contents into your CSS file and the <script> contents into your JS file. Keep the veil markup as shallow as possible — directly inside <body> is ideal.
Q. Why does the veil start closed?
A. A page transition is two halves: the veil closes on the page you are leaving, and opens on the page you arrive at. Starting closed and opening right after load makes the whole journey read as one continuous motion. If it started open, you would see a flash of blank page on arrival.
Q. What is the noscript style for?
A. JavaScript is what opens the veil, so without it the veil would stay closed and hide the page. The one-line noscript style removes the veil entirely when JavaScript is unavailable. Do not drop that line.
Q. Is JavaScript required?
A. For curtains and page transitions, yes — the link click has to be intercepted so the veil can finish closing before the browser navigates. Loading screens only wait for the window load event, which takes three lines. Every visual movement is pure CSS and no external library is loaded.
Q. How does this compare to the View Transitions API?
A. With the View Transitions API you can write it in a few lines using @view-transition { navigation: auto; } and keyframes, with no JavaScript at all. The trade-off is limited browser support, and it only covers same-origin navigation. This tool uses the traditional JavaScript approach so it works everywhere. The visual CSS carries over to either method.
Q. Links do not navigate, or the animation fires twice
A. The copied code targets internal links with the selector a[href^="/"]. If your site writes links as relative paths or full URLs, adjust that selector to match. It is also safer to exclude links that open in a new tab and links to other sites.
Q. Are there browsers where some animations do not run?
A. Counts up to 100% relies on the CSS @property rule, so the number stays at 0 where that is unsupported. Circle iris opens and Diagonal cut wipe use clip-path. All of these work in current Chrome, Edge, Safari and Firefox.

🔗 Related tools

← Back to the gallery