Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

CSS can FINALLY animate height: auto!

wesbos's profile picture

Wes Bos

435,508 subscribers

323,288 görüntüleme • 1 yıl önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

Related 🤙

hārmañ profil fotoğrafı
hārmañ1 yıl önce

Next: animate display none

Wes Bos profil fotoğrafı
Wes Bos1 yıl önce

Already possible! starting-style does this:

Julian Domke profil fotoğrafı
Julian Domke1 yıl önce

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 (🛠️, 🤖, 🏡 ) profil fotoğrafı
jeffscottworld (🛠️, 🤖, 🏡 )1 yıl önce

Holy hell lol I don’t even believe it

Hunter Becton profil fotoğrafı
Hunter Becton1 yıl önce

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

Wes Bos profil fotoğrafı
Wes Bos1 yıl önce

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 profil fotoğrafı
Cyrus Zei1 yıl önce

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 profil fotoğrafı
ProEvilz1 yıl önce

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

Avi Cohen Nehemia profil fotoğrafı
Avi Cohen Nehemia1 yıl önce

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

Benzer Videolar

¡NUEVO en CSS! Anima height a auto
0:40

¡NUEVO en CSS! Anima height a auto

Miguel Ángel Durán

36,041 görüntüleme • 1 yıl önce

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

¡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 görüntüleme • 1 yıl önce

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; }
0:25

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 görüntüleme • 1 yıl önce

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

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 görüntüleme • 9 ay önce

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! 🫶
0:28

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,460 görüntüleme • 1 yıl önce

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

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

jhey ʕ•ᴥ•ʔ

229,714 görüntüleme • 1 yıl önce

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 ~
0:26

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

114,785 görüntüleme • 7 ay önce

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; }
0:26

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,428 görüntüleme • 1 yıl önce

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! 👇
1:31

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,170 görüntüleme • 2 yıl önce

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

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 görüntüleme • 1 yıl önce

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

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,158 görüntüleme • 8 ay önce

finally starting to animate bigger enemies, hurt sprites included.
0:59

finally starting to animate bigger enemies, hurt sprites included.

a bottle of vinegar

42,893 görüntüleme • 3 yıl önce

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.
0:25

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 ʕ•ᴥ•ʔ

112,022 görüntüleme • 1 yıl önce

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

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 görüntüleme • 2 yıl önce

why can i animate
0:35

why can i animate

Sendo。

15,670 görüntüleme • 1 yıl önce

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

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,420 görüntüleme • 2 yıl önce

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

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

jass

24,694 görüntüleme • 2 ay önce

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
1:16

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 görüntüleme • 2 yıl önce

Can you tell CSS from BS? Can you beat my score?
2:25

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

Firefox for Web Developers

37,166 görüntüleme • 2 ay önce