Wonderful article. I hate to be a pedant but you have a typo that detracts some attention because it is in the opening paragraph. > I mean, does anybody really enjoys a stiff, snappy UI? enjoys => enjoy
Fixed! Thank you
A practical guide to CSS transitions and animations
11–20 of 44 posts
Re: A practical guide to CSS transitions and animations
#12Earlier quoted context omitted.
You should only animate GPU-accelerated properties (transform, opacity) if you care about performance and responsiveness, or in the worst case some properties that trigger paint (color, backgroundColor, etc.).
That's what I (sort of) learned the hard way :) So most useful animations like the collapsing list item in the article are nigh impossible in CSS.
That's true, there are some limitations. Sometimes you can still do those sort of things in CSS if you set the target values using JS (instead of changing height to 0, change scaleY to 0 and translate up the elements from below with the height of the element that was removed). If all elements are same height, or the height is known beforehand you can just hardcode that translate value into the animations.
Re: A practical guide to CSS transitions and animations
#13Wait, is it really true that "ease-out" is intended/best for animating elements moving IN from off screen, and "ease-in" for animating elements moving OUT of screen from on screen? I've been using them opposite/wrong (as their names led me to) all along?
The name refers to easing into or out of the animation. You want to ease into an animation for something leaving the screen (train leaving the station) versus one entering the screen (train arriving)
Re: A practical guide to CSS transitions and animations
#14This is cool, but... to say animations and transitions are overused on the web is an understatement.
Distracting, annoying, slow, increase webpage resource use, induce nausea in a fair number of users... ask yourself, are they really necessary or do you think they just look "cool"? If it's the latter, probably don't use them.
Re: A practical guide to CSS transitions and animations
#15Earlier quoted context omitted.
That's what I (sort of) learned the hard way :) So most useful animations like the collapsing list item in the article are nigh impossible in CSS.
That's true, there are some limitations. Sometimes you can still do those sort of things in CSS if you set the target values using JS (instead of changing height to 0, change scaleY to 0 and translate up the elements from below with the height of the element that was removed). If all elements are same height, or the height is known beforehand you can just hardcode that translate value into the animations.
> instead of changing height to 0, change scaleY to 0 and translate up the elements from below with the height of the element that was removed
This will leave a gap below the elements
> If all elements are same height, or the height is known beforehand you can just hardcode that translate value into the animations.
The problem is that there's rarely if ever a case when you know the height of all elements on a page :(
Re: A practical guide to CSS transitions and animations
#16The real question here is how OP's username is green.
I tried making a new account and naming it accountname but HN doesn't allow characters like '<' so that didn't work.
Re: A practical guide to CSS transitions and animations
#17The real question here is how OP's username is green. I tried making a new account and naming it accountname but HN doesn't allow characters like '<' so that didn't work.
Accounts newer than 2 weeks show up as green.
https://github.com/minimaxir/hacker-news-undocumented#green-...
Re: A practical guide to CSS transitions and animations
#18The most important thing to remember when working with animations is the following: @media (prefers-reduced-motion: reduce) {} Animations are fine but they will induce vertigo or nausea for some users. Allowing them to turn them off is a must.
Oh man, I didn't realize this was a thing! Thank you for sharing :)
Re: A practical guide to CSS transitions and animations
#19Wonderful article. I hate to be a pedant but you have a typo that detracts some attention because it is in the opening paragraph. > I mean, does anybody really enjoys a stiff, snappy UI? enjoys => enjoy
Typo aside, I greatly prefer a stiff, snappy UI. These kinds of animations look nice and smooth at first, but get in the way after a while. I just want to type some text and check a few boxes, not wait for animations to finish so the UI is responsive again.
Some animations really help usability.
I use a programme picker that is a poor Netflix clone. Selecting down to the next row is immediate, and selecting right for the next show within a row also immediately jumps.
Vertical and horizontal smooth scrolling (a type of animation) would improve the UI (caveat: unless too slow of course).
Re: A practical guide to CSS transitions and animations
#20The real question here is how OP's username is green. I tried making a new account and naming it accountname but HN doesn't allow characters like '<' so that didn't work.
> but HN doesn't allow characters like 'Good thing that it doesn't, otherwise the next deadline would be about XSS injection on Hacker News.