正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Playing with view transitions in the web

Marvin Schwaibold

9,101 subscribers

27,574 次观看 • 6 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

View Transitions just learned how to multitask with the rest of the page. Scoped View Transitions let you run multiple, fluid transitions at the same time, all with just a few lines of CSS. Web UX, re-imagined →

View Transitions just learned how to multitask with the rest of the page. Scoped View Transitions let you run multiple, fluid transitions at the same time, all with just a few lines of CSS. Web UX, re-imagined →

Chrome for Developers

114,656 次观看 • 9 个月前

View Transitions in Next.js 15.2

View Transitions in Next.js 15.2

Alex Sidorenko

65,135 次观看 • 1 年前

Have you tried out the View Transitions API? ✨ Been playing have a play with it this evening 👀 A bit of JavaScript Web Animations API usage for those rainbow lines but sets me up for another demo idea! 💡 Repo && deets 👇

Have you tried out the View Transitions API? ✨ Been playing have a play with it this evening 👀 A bit of JavaScript Web Animations API usage for those rainbow lines but sets me up for another demo idea! 💡 Repo && deets 👇

jhey ʕ•ᴥ•ʔ

346,329 次观看 • 3 年前

Playing around with hero transitions on Webflow

Playing around with hero transitions on Webflow

JP

36,998 次观看 • 1 年前

EXPERIMENT: VFX + Camera Transitions in Veo 3 I've been playing with VEO 3, trying out some cool VFX and camera transitions with simple prompts. Check out these 6 examples (plus all the prompts) ... 👇

EXPERIMENT: VFX + Camera Transitions in Veo 3 I've been playing with VEO 3, trying out some cool VFX and camera transitions with simple prompts. Check out these 6 examples (plus all the prompts) ... 👇

Marco

66,980 次观看 • 1 年前

next-view-transitions

next-view-transitions

Alex Sidorenko

115,036 次观看 • 2 年前

take the view transitions API away from me, please

take the view transitions API away from me, please

Manuel Muñoz Solera

25,222 次观看 • 3 天前

View Transitions with CSS linear() to create a light flicker effect 💡

View Transitions with CSS linear() to create a light flicker effect 💡

jhey ʕ•ᴥ•ʔ

271,345 次观看 • 2 年前

Little flow posing today. Starting to put the routine together, so playing with a few poses and transitions.

Little flow posing today. Starting to put the routine together, so playing with a few poses and transitions.

🔗 Ian 🔗

25,251 次观看 • 6 个月前

forever in awe with the transitions in this edit

forever in awe with the transitions in this edit

ˆ𐃷ˆ

102,458 次观看 • 1 年前

If you thought we were done with View Transitions, guess again! Chrome is working on “Scoped View Transitions” which allow you to scope a VT to a subtree of the DOM. This unlocks things like concurrent VTs and prevents layering issues. Thread on 🦋:

If you thought we were done with View Transitions, guess again! Chrome is working on “Scoped View Transitions” which allow you to scope a VT to a subtree of the DOM. This unlocks things like concurrent VTs and prevents layering issues. Thread on 🦋:

Bramus

23,414 次观看 • 1 年前

Like View Transitions? Astro Photo Gallery is a fresh View Transitions + Astro template by Maxi Ferreira and I. Try our demo & links on 🚀

Like View Transitions? Astro Photo Gallery is a fresh View Transitions + Astro template by Maxi Ferreira and I. Try our demo & links on 🚀

Addy Osmani

79,810 次观看 • 3 年前

Ratride v1.0 released: - Markdown slide presentation tool - Animated transitions - Works on terminal & on Web built with #ratatui + tachyonfx

Ratride v1.0 released: - Markdown slide presentation tool - Animated transitions - Works on terminal & on Web built with #ratatui + tachyonfx

𝘼𝙈𝘼𝙂𝙄

15,706 次观看 • 6 个月前

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

230,229 次观看 • 3 年前

The Chrome DevTools Animations inspector is a favorite. Modify timing, delays and durations. Great for working with CSS Animations & View Transitions.

The Chrome DevTools Animations inspector is a favorite. Modify timing, delays and durations. Great for working with CSS Animations & View Transitions.

Addy Osmani

33,960 次观看 • 2 年前

Tune your UI transitions directly in Cursor CLI, Codex or Claude Code with the Transitions-dev skill built in It scans your project with your agent, suggests transitions improvements, and applies changes directly to source code

Tune your UI transitions directly in Cursor CLI, Codex or Claude Code with the Transitions-dev skill built in It scans your project with your agent, suggests transitions improvements, and applies changes directly to source code

Jakub Antalik

72,016 次观看 • 2 个月前

A really cool feature of the View Transitions API (available now in stable Chrome!) is that videos and animations on the new view continue to play smoothly while transitioning. With a bit of extra JavaScript, you can even do this with elements shared across different routes ✨

A really cool feature of the View Transitions API (available now in stable Chrome!) is that videos and animations on the new view continue to play smoothly while transitioning. With a bit of extra JavaScript, you can even do this with elements shared across different routes ✨

Maxi Ferreira

351,295 次观看 • 3 年前