Live data from Hacker News

A practical guide to CSS transitions and animations

blog.prototypr.io

41–44 of 44 posts

Re: A practical guide to CSS transitions and animations

#41

Earlier quoted context omitted.

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)

oops.

Few of the explanations of ease-in and ease-out I find on top page of google results even now explain this very well. I wonder how many are getting it wrong.

Re: A practical guide to CSS transitions and animations

#42
post #19

Earlier quoted context omitted.

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).

Could you tell me how?

Three animations I have implemented:

1. bounce of badge when message received and badge number increases (no sound). A la Mac.

2. After modality viewing item in list on mobile, when returning to list highlight the item to show what you have just edited (easy to lose place, animated highlight helps show new summary).

3. On closing a drawer, animate the closing so you don't lose view of next item.

I loath animations (and I really loath coding them) but I will use them if I think it improves the UI, if they are fast, and I don't use them for "design" (I'm an engineer not a designer!).

Re: A practical guide to CSS transitions and animations

#43
post #3

And then you try implementing any of them and realise that even the simplest examples often break in subtle and not-so-subtle ways, have hidden and not-so-hidden restrictions, may or may not be hardware accelerated, may or may not break layout, cause reflow and/or repaint, can't be stopped once started...

"can't be stopped once started..." what a shame, what a shame.

Re: A practical guide to CSS transitions and animations

#44
post #25
post #14

This 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.

When fonts were new, documents were full of different fonts. Now it is animations on web pages.

Yea, it's almost always all clutter, kind of reminds me of all the animated gifs jammed onto pages in 1994.
Post reply on HN