Shrink and dissolve
Click the tile and it scales down while blurring and fading out, like it is evaporating.
CSSJavaScriptBeginner
<button class="tile" id="t">Click me</button>
.tile{width:150px;height:150px;border-radius:24px;background:linear-gradient(135deg,#e5603a,#f08a5d);display:grid;place-items:center;
color:#270100;font-weight:700;cursor:pointer;border:0;font-size:16px;transition:transform .3s,filter .3s,opacity .3s}
.tile:active{transform:scale(.96)}
.tile.out{transform:scale(.4);filter:blur(10px);opacity:0;pointer-events:none}
.tile.in{animation:back .6s cubic-bezier(.2,.8,.2,1)}
@keyframes back{from{opacity:0;transform:scale(1.2);filter:blur(10px)}}
const tile = document.getElementById('t');
tile.onclick = () => {
tile.classList.add('out');
setTimeout(() => { tile.classList.remove('out'); tile.classList.add('in'); }, 1100); // demo only: bring it back
setTimeout(() => tile.classList.remove('in'), 1800);
};
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Shrink and dissolve</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.tile{width:150px;height:150px;border-radius:24px;background:linear-gradient(135deg,#e5603a,#f08a5d);display:grid;place-items:center;
color:#270100;font-weight:700;cursor:pointer;border:0;font-size:16px;transition:transform .3s,filter .3s,opacity .3s}
.tile:active{transform:scale(.96)}
.tile.out{transform:scale(.4);filter:blur(10px);opacity:0;pointer-events:none}
.tile.in{animation:back .6s cubic-bezier(.2,.8,.2,1)}
@keyframes back{from{opacity:0;transform:scale(1.2);filter:blur(10px)}}
</style></head>
<body><button class="tile" id="t">Click me</button>
<script>
const tile = document.getElementById('t');
tile.onclick = () => {
tile.classList.add('out');
setTimeout(() => { tile.classList.remove('out'); tile.classList.add('in'); }, 1100); // demo only: bring it back
setTimeout(() => tile.classList.remove('in'), 1800);
};
</script>
</body></html>
Good for
Closing modals, removing tiles and confirming a delete.
Watch out for
Exits should be faster than entrances (150 to 300ms). People already decided to leave.
Accessibility
Wrap motion in @media (prefers-reduced-motion: reduce) and switch it off or shorten it for people who ask for less movement.