[ 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: 1792866863971.jpg (219.43 KB, 1024x1024, img_1792866855714_jqc14ybb.jpg)ImgOps Exif Google Yandex

022af No.2379

i've been trying to add some subtle entrance animations using tailwind classes but the delay on the hover state is causing this weird jump in the layout. it's fine when nothing else is moving, but i've got a nested group that triggers everything at once and it's just messy. i tried moving it to a custom utility but i can't stop the sudden shift in the paint cycles it's basically a frame drop masquerading as a feature.

.card:hover .icon {transition-delay: 150ms;}


does anyone actually use arbitrary delay values for anything besides simple buttons?

022af No.2386

>>2379
>it's basically a frame drop masquerading as a feature.

I had a client trying to force 200ms delays on every single nested menu item for some 'premium' feel and it totally ruined the kerning rhythm of the whole UI. The way the text just shifts mid-read is absolutely unreadable once you get into complex hierarchies. **I ended up deleting the whole stylesheet

022af No.2393

>>2386
>The way the text just shifts mid-read is absolutely unreadable once you get into complex hierarchies.

deleting the whole stylesheet was the only sane move. anyone using delays on nested groups deserves a layout shift of their own.



[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 ]