MastodonTech.de

Frontend DogmaView Transition List Reordering (With a Kick Flip), by <a href="https://front-end.social/@chriscoyier" class="u-url mention" rel="nofollow noopener" target="_blank">@chriscoyier</a> (@frontendmasters.com):<a href="https://frontendmasters.com/blog/view-transition-list-reordering-with-a-kick-flip/" rel="nofollow noopener" translate="no" target="_blank">https://frontendmasters.com/blog/view-transition-list-reordering-with-a-kick-flip/</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/viewtransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#viewtransitions</a> <a href="https://mas.to/tags/animations" class="mention hashtag" rel="nofollow noopener" target="_blank">#animations</a> <a href="https://mas.to/tags/effects" class="mention hashtag" rel="nofollow noopener" target="_blank">#effects</a>

Chee Aun 🤔This took longer than expected. Pretty cool that it works.Post featured in video: <a href="https://tapbots.social/@mark/114617305665385240" rel="nofollow noopener" translate="no" target="_blank">https://tapbots.social/@mark/114617305665385240</a><a href="https://mastodon.social/tags/PhanpySocialDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#PhanpySocialDev</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#ViewTransitions</a>

BramusThe slides + a recording of my talk can be found on my blog.<a href="https://www.bram.us/2025/05/31/supercharge-web-ux-with-view-transitions-2025-05-28-webexpo/" rel="nofollow noopener" translate="no" target="_blank">https://www.bram.us/2025/05/31/supercharge-web-ux-with-view-transitions-2025-05-28-webexpo/</a><a href="https://front-end.social/tags/WebExpo" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebExpo</a> <a href="https://front-end.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#ViewTransitions</a>

BramusSneak preview of my talk “Supercharge Web UX with View Transitions” which I’ll be giving at <a href="https://front-end.social/tags/WebExpo" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebExpo</a> in Prague tomorrow.(Demo by the wonderful Maxi Ferreira – <a href="https://live-transitions.pages.dev/" rel="nofollow noopener" translate="no" target="_blank">https://live-transitions.pages.dev/</a>)<a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://front-end.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#ViewTransitions</a>

Frontend DogmaWeb Animations Today and Tomorrow, by <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> (<a href="https://chromium.social/@developers" class="u-url mention" rel="nofollow noopener" target="_blank">@developers</a>):<a href="https://www.youtube.com/watch?v=UcXWY057YuQ" rel="nofollow noopener" translate="no" target="_blank">https://www.youtube.com/watch?v=UcXWY057YuQ</a><a href="https://mas.to/tags/videos" class="mention hashtag" rel="nofollow noopener" target="_blank">#videos</a> <a href="https://mas.to/tags/animations" class="mention hashtag" rel="nofollow noopener" target="_blank">#animations</a> <a href="https://mas.to/tags/viewtransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#viewtransitions</a> <a href="https://mas.to/tags/scrolling" class="mention hashtag" rel="nofollow noopener" target="_blank">#scrolling</a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/webplatform" class="mention hashtag" rel="nofollow noopener" target="_blank">#webplatform</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#Techniques</a> Smoothly animating a ‘border-radius’ · Two approaches using CSS View Transitions <a href="https://ilo.im/163xin" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/163xin</a>_____ <a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ModernCSS</a> <a href="https://mastodon.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#ViewTransitions</a> <a href="https://mastodon.social/tags/Animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Animation</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

Nicolas Hoizey“View Transitions Break Incremental Rendering” by <a href="https://front-end.social/@eeeps" class="u-url mention" rel="nofollow noopener" target="_blank">@eeeps</a>🔗 <a href="https://ericportis.com/posts/2023/view-transitions-break-incremental-rendering/" rel="nofollow noopener" translate="no" target="_blank">https://ericportis.com/posts/2023/view-transitions-break-incremental-rendering/</a>> Instead of showing users that this thing is the same as that thing, we’ve told them, perhaps with extra motion/panache, that even though these the two things might seem the same, they are in fact distinct. It’s like shaking your head “no” while telling someone “yes”.<a href="https://mamot.fr/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#ViewTransitions</a> <a href="https://mamot.fr/tags/WebPerf" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebPerf</a>⚓️ <a href="https://nicolas-hoizey.com/links/2025/05/07/view-transitions-break-incremental-rendering/" rel="nofollow noopener" translate="no" target="_blank">https://nicolas-hoizey.com/links/2025/05/07/view-transitions-break-incremental-rendering/</a>

Frontend DogmaUsing View Transitions in Next.js, by <a href="https://mas.to/@jackabox" class="u-url mention" rel="nofollow noopener" target="_blank">@jackabox</a>:<a href="https://jackwhiting.co.uk/posts/using-view-transitions-in-next-js" rel="nofollow noopener" translate="no" target="_blank">https://jackwhiting.co.uk/posts/using-view-transitions-in-next-js</a><a href="https://mas.to/tags/nextjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#nextjs</a> <a href="https://mas.to/tags/viewtransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#viewtransitions</a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener" target="_blank">#Guides</a> Must-know Interop features 2025 · A learning guide for the next couple of months <a href="https://ilo.im/1631b4" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/1631b4</a>_____ <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/Interoperability" class="mention hashtag" rel="nofollow noopener" target="_blank">#Interoperability</a> <a href="https://mastodon.social/tags/AnchorPositioning" class="mention hashtag" rel="nofollow noopener" target="_blank">#AnchorPositioning</a> <a href="https://mastodon.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#ViewTransitions</a> <a href="https://mastodon.social/tags/WebVitals" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebVitals</a> <a href="https://mastodon.social/tags/WebPerf" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebPerf</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Frontend DogmaThe Bare Minimum You Need to Enable View Transitions on Your Website, by @amitmerchant.bsky.social:<a href="https://www.amitmerchant.com/bare-minimum-view-transitions/" rel="nofollow noopener" translate="no" target="_blank">https://www.amitmerchant.com/bare-minimum-view-transitions/</a><a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/viewtransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#viewtransitions</a> <a href="https://mas.to/tags/minimalism" class="mention hashtag" rel="nofollow noopener" target="_blank">#minimalism</a>

Frontend DogmaView Transitions Applied: Dealing With the Snapshot Containing Block, by <a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@bramus</a> (@bramusblog@x.com):<a href="https://www.bram.us/2025/03/04/view-transitions-snapshot-containing-block/" rel="nofollow noopener" translate="no" target="_blank">https://www.bram.us/2025/03/04/view-transitions-snapshot-containing-block/</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/viewtransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#viewtransitions</a>

Frontend DogmaToe Dipping Into View Transitions, by <a href="https://front-end.social/@geoff" class="u-url mention" rel="nofollow noopener" target="_blank">@geoff</a> (<a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener" target="_blank">@csstricks</a>):<a href="https://css-tricks.com/toe-dipping-into-view-transitions/" rel="nofollow noopener" translate="no" target="_blank">https://css-tricks.com/toe-dipping-into-view-transitions/</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/viewtransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#viewtransitions</a>

BramusView Transitions Applied: Smoothly animating a `border-radius`🔗 <a href="https://www.bram.us/2025/03/11/view-transitions-border-radius/" rel="nofollow noopener" translate="no" target="_blank">https://www.bram.us/2025/03/11/view-transitions-border-radius/</a><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://front-end.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#ViewTransitions</a>

Marius GundersenI played around with <a href="https://mastodon.social/tags/viewtransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#viewtransitions</a> and <a href="https://mastodon.social/tags/mathml" class="mention hashtag" rel="nofollow noopener" target="_blank">#mathml</a> yesterday, and made this example of how to animate solving an equation. It was pretty straight forward to get to work, but I wish I had some control over the transitions. Now the elements move in a straight line, it would be cool of i could make them follow an arc. <a href="https://codepen.io/mariusgundersen/pen/EaxvjmQ" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/mariusgundersen/pen/EaxvjmQ</a><a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a>

Jens Oliver MeiertView transitions now have their own category on <a href="https://mas.to/@frontenddogma" class="u-url mention" rel="nofollow noopener" target="_blank">@frontenddogma</a>:<a href="https://frontenddogma.com/topics/view-transitions/" rel="nofollow noopener" translate="no" target="_blank">https://frontenddogma.com/topics/view-transitions/</a>(Testing if notes on some new categories and tags could be helpful.)<a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/viewtransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#viewtransitions</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener" target="_blank">#Approaches</a> Building websites with LLMS · (L)ots of (L)ittle ht(M)l page(S) is a game changer <a href="https://ilo.im/162myf" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/162myf</a>_____ <a href="https://mastodon.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#ViewTransitions</a> <a href="https://mastodon.social/tags/Navigation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Navigation</a> <a href="https://mastodon.social/tags/Filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#Filter</a> <a href="https://mastodon.social/tags/Webpage" class="mention hashtag" rel="nofollow noopener" target="_blank">#Webpage</a> <a href="https://mastodon.social/tags/Website" class="mention hashtag" rel="nofollow noopener" target="_blank">#Website</a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener" target="_blank">#ProgressiveEnhancement</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

Chris RuppelImprove accessibility by reducing motion of all kinds: View Transitions, CSS Transitions, CSS Animations, and Picture elements — all without rewriting styles or content.Examples use an existing client website, showing that you can do the same in ongoing work. Don't wait for your next project to get a fresh start.. do it today! 🔗 <a href="https://chrisruppel.com/blog/modernizing-with-web-platform-reduced-motion/" rel="nofollow noopener" translate="no" target="_blank">https://chrisruppel.com/blog/modernizing-with-web-platform-reduced-motion/</a><a href="https://mastodon.social/tags/accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#accessibility</a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/CssTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssTransitions</a> <a href="https://mastodon.social/tags/CssAnimations" class="mention hashtag" rel="nofollow noopener" target="_blank">#CssAnimations</a> <a href="https://mastodon.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#ViewTransitions</a> <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#JS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.social/tags/WebPlatform" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebPlatform</a>

Nick :pirat:<a href="https://discuss.tchncs.de/u/OpticalMoose" class="u-url mention" rel="nofollow noopener" target="_blank">@OpticalMoose</a> <a href="https://social.afront.org/@pbarker" class="u-url mention" rel="nofollow noopener" target="_blank">@pbarker</a> Here are some links: * VideoEncoderConfigurationPreset of different <a href="https://piraten-partei.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#Browser</a>s: <a href="https://api-ref.agora.io/en/video-sdk/web/4.x/globals.html#videoencoderconfigurationpreset" rel="nofollow noopener" translate="no" target="_blank">https://api-ref.agora.io/en/video-sdk/web/4.x/globals.html#videoencoderconfigurationpreset</a> * The (arguably or not needed) <a href="https://piraten-partei.social/tags/CSSContainerStyleQueries" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSContainerStyleQueries</a> comparison: <a href="https://caniuse.com/css-container-queries-style" rel="nofollow noopener" translate="no" target="_blank">https://caniuse.com/css-container-queries-style</a> * <a href="https://piraten-partei.social/tags/WebShareAPI" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebShareAPI</a>: <a href="https://caniuse.com/web-share" rel="nofollow noopener" translate="no" target="_blank">https://caniuse.com/web-share</a> * <a href="https://piraten-partei.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#ViewTransitions</a>: <a href="https://caniuse.com/view-transitions" rel="nofollow noopener" translate="no" target="_blank">https://caniuse.com/view-transitions</a> * <a href="https://piraten-partei.social/tags/JPEGXL" class="mention hashtag" rel="nofollow noopener" target="_blank">#JPEGXL</a>(and other <a href="https://piraten-partei.social/tags/codec" class="mention hashtag" rel="nofollow noopener" target="_blank">#codec</a> integration chart): <a href="https://connect.mozilla.org/t5/ideas/support-jpeg-xl/idi-p/18433" rel="nofollow noopener" translate="no" target="_blank">https://connect.mozilla.org/t5/ideas/support-jpeg-xl/idi-p/18433</a> * The gradient bug, open since 2011: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=627771" rel="nofollow noopener" translate="no" target="_blank">https://bugzilla.mozilla.org/show_bug.cgi?id=627771</a>

westbrookHey <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> friends. 👋 Do we expect View Transitions to bork `background-filter` rules? Pending issue? Known workaround?Asking for a friend.<a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> <a href="https://mastodon.social/tags/viewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#viewTransitions</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#Techniques</a> Keeping interactivity during a view transition · How to bypass the ::view-transition overlay clicks <a href="https://ilo.im/1623et" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/1623et</a>_____ <a href="https://mastodon.social/tags/Interactivity" class="mention hashtag" rel="nofollow noopener" target="_blank">#Interactivity</a> <a href="https://mastodon.social/tags/Animations" class="mention hashtag" rel="nofollow noopener" target="_blank">#Animations</a> <a href="https://mastodon.social/tags/Transitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#Transitions</a> <a href="https://mastodon.social/tags/Webpage" class="mention hashtag" rel="nofollow noopener" target="_blank">#Webpage</a> <a href="https://mastodon.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#ViewTransitions</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Frühere Suchanfragen

Suchoptionen

Verwaltet von:

Serverstatistik:

#viewtransitions