正在加载视频...

视频加载失败

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

CSS can FINALLY animate height: auto!

Wes Bos

435,035 subscribers

323,239 次观看 • 1 年前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

10 条评论

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈1 年前

Related 🤙

hārmañ 的头像

hārmañ1 年前

Next: animate display none

Wes Bos 的头像

Wes Bos1 年前

Already possible! starting-style does this:

Julian Domke 的头像

Julian Domke1 年前

whoever works on css should get 10 raises. frontend frameworks get more and more complicated, css just gets more useful. thanks for keeping us informed! 🥳

jeffscottworld (🛠️, 🤖, 🏡 ) 的头像

jeffscottworld (🛠️, 🤖, 🏡 )1 年前

Holy hell lol I don’t even believe it

Hunter Becton 的头像

Hunter Becton1 年前

What's causing the bounce at the end of the animation?

Wes Bos 的头像

Wes Bos1 年前

custom bezier curve that goes past 1, so it bounces back. transition: height 0.5s cubic-bezier(1, 0.63, 0.25, 1.5);

Cyrus Zei 的头像

Cyrus Zei1 年前

Yes !! Here we go!! I can finally make accordions that actually look like they where made in 2024 and not 1990 called and wanted their accordion back 😂

ProEvilz 的头像

ProEvilz1 年前

we have been waiting for this every since $.slideDown()

Avi Cohen Nehemia 的头像

Avi Cohen Nehemia1 年前

Wasn't this already possible for a while now? @KevinJPowell covered something similar a year ago

相关视频

¡NUEVO en CSS! Anima height a auto

¡NUEVO en CSS! Anima height a auto

Miguel Ángel Durán

36,041 次观看 • 1 年前

¡NUEVO en CSS! Por fin podrás animar el height a auto. Con una sola línea más en tu código ↓

¡NUEVO en CSS! Por fin podrás animar el height a auto. Con una sola línea más en tu código ↓

Miguel Ángel Durán

58,829 次观看 • 1 年前

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jhey ʕ•ᴥ•ʔ

51,127 次观看 • 1 年前

You can animate auto height of any div using a simple div wrapper. - It uses Resize Observer to monitor when the content inside changes size. - Really simple wrapper. here's how 👇

You can animate auto height of any div using a simple div wrapper. - It uses Resize Observer to monitor when the content inside changes size. - Really simple wrapper. here's how 👇

preet

14,050 次观看 • 9 个月前

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

jhey ʕ•ᴥ•ʔ

216,281 次观看 • 1 年前

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

jhey ʕ•ᴥ•ʔ

229,714 次观看 • 1 年前

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

104,532 次观看 • 7 个月前

CSS sidebar tricks 🤌 transition expanded menu items to "auto" height using grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; }

CSS sidebar tricks 🤌 transition expanded menu items to "auto" height using grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; }

jhey ʕ•ᴥ•ʔ

117,372 次观看 • 1 年前

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

319,151 次观看 • 2 年前

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨

jhey ʕ•ᴥ•ʔ

134,905 次观看 • 1 年前

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

jhey ʕ•ᴥ•ʔ

118,057 次观看 • 8 个月前

finally starting to animate bigger enemies, hurt sprites included.

finally starting to animate bigger enemies, hurt sprites included.

a bottle of vinegar

42,893 次观看 • 3 年前

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

111,954 次观看 • 1 年前

Added auto-animate support to the new scroll mode. Now every reveal.js deck out there can also be a scroll-animated website 🪄

Added auto-animate support to the new scroll mode. Now every reveal.js deck out there can also be a scroll-animated website 🪄

Hakim El Hattab

32,878 次观看 • 2 年前

why can i animate

why can i animate

Sendo。

15,670 次观看 • 1 年前

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

495,419 次观看 • 2 年前

When wit studio finally have the freedom to animate what they want

When wit studio finally have the freedom to animate what they want

jass

24,694 次观看 • 1 个月前

I can FINALLY post my boards and animation from this episode! I got to animate on this entire first scene with Bill, Fillmore, and Duncan #Smilingfriends

I can FINALLY post my boards and animation from this episode! I got to animate on this entire first scene with Bill, Fillmore, and Duncan #Smilingfriends

David Hootselle (Shigloo)

310,070 次观看 • 2 年前

Can you tell CSS from BS? Can you beat my score?

Can you tell CSS from BS? Can you beat my score?

Firefox for Web Developers

37,166 次观看 • 2 个月前