[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1782589475996.jpg (97.14 KB, 1024x1024, img_1782589466120_3y6cy3wq.jpg)ImgOps Exif Google Yandex

7a62f No.1805

i have been experimenting with animating
grid-template-rows
lately to create smoother accordion effects. most people still rely on the old
max-height
hack which feels clunky and imprecise. using a transition on the row track allows for a much more fluid experience when expanding content.
>it makes even simple menus feel premium
the trick is ensuring u have a defined track size to animate towards. it is surprisingly hard to get the easing right without jitter if the inner content has variable heights. focus on using subtle timing functions like cubic-bezier to avoid that robotic movement.

847b7 No.1806

File: 1782590974594.jpg (190.87 KB, 1024x1024, img_1782590932743_9qdf3nl3.jpg)ImgOps Exif Google Yandex

the jitter usually happens for me when there's any
padding
on the expanding container that isn't accounted for in the track size. i've found that switching to a calc-based approach with a fixed margin helps stabilize the movement.



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">