Загрузка видео...

Не удалось загрузить видео

На главную

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 →

ChromiumDev's profile picture

Chrome for Developers

422,625 subscribers

114,656 просмотров • 10 месяцев назад •via X (Twitter)

ОбразованиеНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

Playing with view transitions in the web
0:25

Playing with view transitions in the web

Marvin Schwaibold

27,574 просмотров • 7 месяцев назад

🤯 Just 4 lines of CSS View Transitions are great for changing pages BUT it's incredible for animating any changes to the DOM
3:51

🤯 Just 4 lines of CSS View Transitions are great for changing pages BUT it's incredible for animating any changes to the DOM

Wes Bos

149,137 просмотров • 2 лет назад

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀
0:20

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀

jhey ʕ•ᴥ•ʔ

142,262 просмотров • 2 лет назад

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 🦋:
0:28

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,435 просмотров • 1 год назад

#CSS only full URL page navigation with View Transitions - 5 minute prototype - 1 meta tag - a few lines of CSS - Open Props Behind a flag in Canary: chrome://flags/#view-transition-on-navigation It's not finished yet, but there's really rad opportunities already available 🤓
0:33

#CSS only full URL page navigation with View Transitions - 5 minute prototype - 1 meta tag - a few lines of CSS - Open Props Behind a flag in Canary: chrome://flags/#view-transition-on-navigation It's not finished yet, but there's really rad opportunities already available 🤓

Adam Argyle

30,454 просмотров • 3 лет назад

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!
0:27

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

Adam Argyle

351,725 просмотров • 3 лет назад

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

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 лет назад

Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop. Just one of the demos I'm planning for the new docs. 🙂
0:30

Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop. Just one of the demos I'm planning for the new docs. 🙂

Devon Govett

47,483 просмотров • 1 год назад

Kai Cenat might have just witnessed one of the HARDEST song transitions of all time 😭🔥
0:41

Kai Cenat might have just witnessed one of the HARDEST song transitions of all time 😭🔥

Hotspot

2,457,238 просмотров • 2 лет назад

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! 👇
0:38

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 transitions for the center position between all members in just few seconds will never cease to impress me
0:22

the transitions for the center position between all members in just few seconds will never cease to impress me

ΉYPΣBӨY

161,680 просмотров • 8 месяцев назад

View Transitions just got simpler with Next.js 16.2. <𝙻𝚒𝚗𝚔> now has a 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚃𝚢𝚙𝚎𝚜 prop. Tag your navigation with a type, and <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> picks the right animation.
0:38

View Transitions just got simpler with Next.js 16.2. <𝙻𝚒𝚗𝚔> now has a 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚃𝚢𝚙𝚎𝚜 prop. Tag your navigation with a type, and <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> picks the right animation.

Aurora Scharff

67,535 просмотров • 6 месяцев назад

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 👇
0:28

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 лет назад

‘I’M ALIVE’ transitions into ‘REAP WHAT YOU SOW’ & ‘A WHOLE LOT’ transitions into ‘SLOW BURN’ The album also starts with the sound of a cassette being played and ends with the sound of it being taken out
0:30

‘I’M ALIVE’ transitions into ‘REAP WHAT YOU SOW’ & ‘A WHOLE LOT’ transitions into ‘SLOW BURN’ The album also starts with the sound of a cassette being played and ends with the sound of it being taken out

jj.finns

15,567 просмотров • 1 месяц назад

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 ✨
0:32

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,309 просмотров • 3 лет назад

View Transitions with CSS linear() to create a light flicker effect on theme change 💡 [data-theme='light']::view-transition-group(root) { animation-timing-function: var(--flicker); } jus' set a custom timing function on the default animation 👨‍🍳 bonus: drag switch ✨
0:24

View Transitions with CSS linear() to create a light flicker effect on theme change 💡 [data-theme='light']::view-transition-group(root) { animation-timing-function: var(--flicker); } jus' set a custom timing function on the default animation 👨‍🍳 bonus: drag switch ✨

jhey ʕ•ᴥ•ʔ

113,597 просмотров • 11 месяцев назад

Introducing Shred API Build apps at the speed of RISE. Achieve real-time UX with just a few lines of code. Only on RISE
0:42

Introducing Shred API Build apps at the speed of RISE. Achieve real-time UX with just a few lines of code. Only on RISE

RISE

38,296 просмотров • 1 год назад