CSS entry/exit transitions 2024 ⚡️ dialog { filter: blur(4px * (1-var(--op, 0)); opacity: var(--op, 0); transition:display 0.3s allow-discrete, opacity 0.3s, filter 0.3s; } @​starting-style { dialog[open] {--op:0;}} dialog[open] {--op:1;... See more

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @​keyframes highlight { to { --lit: 1; }} mark span { ... See more

3 lines of CSS to make your tooltips/menus stay in view 🤯 (Check it! 👇) [popover] { top: anchor(top); left: anchor(right); position-try-options: flip-block, flip-inline; } Responds to scroll, layout change, etc. Watch the... See more