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.
A practical guide to CSS transitions and animations
41–44 of 44 posts
Re: A practical guide to CSS transitions and animations
#42Earlier 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?
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
#43And 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...
Re: A practical guide to CSS transitions and animations
#44This 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.