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

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

На главную

CSS can FINALLY animate height: auto!

wesbos's profile picture

Wes Bos

438,999 subscribers

323,592 просмотров • 2 лет назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈2 лет назад

Related 🤙

Фото профиля hārmañ
hārmañ2 лет назад

Next: animate display none

Фото профиля Wes Bos
Wes Bos2 лет назад

Already possible! starting-style does this:

Фото профиля Julian Domke
Julian Domke2 лет назад

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 (🛠️, 🤖, 🏡 )2 лет назад

Holy hell lol I don’t even believe it

Фото профиля Hunter Becton
Hunter Becton2 лет назад

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

Фото профиля Wes Bos
Wes Bos2 лет назад

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

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

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

Фото профиля Avi Cohen Nehemia
Avi Cohen Nehemia2 лет назад

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

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

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

¡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 ↓
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,865 просмотров • 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; }
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,170 просмотров • 2 лет назад

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

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,909 просмотров • 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 ~
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

119,817 просмотров • 10 месяцев назад

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,591 просмотров • 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! 👇
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,348 просмотров • 2 лет назад

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,488 просмотров • 11 месяцев назад

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

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

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

why can i animate
0:35

why can i animate

Sendo。

15,705 просмотров • 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! 👇
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,956 просмотров • 2 лет назад

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,962 просмотров • 5 месяцев назад

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

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,227 просмотров • 5 месяцев назад