Pixelate Dissolve

The code

A glimpse of the source:

<div class="transition-preview" id="pixelateDissolve">
    <div class="transition-content old-content">Page A</div>
    <div class="transition-content new-content">Page B</div>
    <div class="pixelate-container">
      <div class="pixel-block" style="animation-delay: 0.170786s;">
      </div>
      <div class="pixel-block" style="animation-delay: 0.241903s;">
      </div>
      <div class="pixel-block" style="animation-delay: 0.0602894s;">
      </div>

Concrete use cases

A few real contexts where Pixelate Dissolve shines:

• Moving between two landing sections
• A page transition in a portfolio site
• Opening a photo gallery

How it works

CSS + a lightweight vanilla JavaScript script (no dependency). It relies on a @keyframes animation and CSS transforms.

Make it yours

You can tweak:

• animation speed (currently 1.2s)

Add it in 3 steps

1. Paste the HTML where you want the effect on your page.
2. Add the CSS to your stylesheet (or in a <style> tag).
3. Add the small JavaScript snippet before </body> — done.

Browser support

Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.

More Transitions effects

FAQ