A Handy Little System for Animated Entrances in CSS(css-tricks.com)
css-tricks.com
A Handy Little System for Animated Entrances in CSS
https://css-tricks.com/a-handy-little-system-for-animated-entrances-in-css/
12 comments
> a relief when i click on a link to any site, and the page loads, and there's no animated anything whatsoever
I've recently disabled CSS animations globally in Firefox's userContent.css and my Web experience has indeed improved considerably. (Annoyingly this particular page content still jumps a little because of some deferred image loading.)
It would be nice if sites respected the prefers-reduced-motion browser media feature.
I've recently disabled CSS animations globally in Firefox's userContent.css and my Web experience has indeed improved considerably. (Annoyingly this particular page content still jumps a little because of some deferred image loading.)
* {
animation: none !important;
transition-property: none !important;
}
It would be nice if sites respected the prefers-reduced-motion browser media feature.
Animations can be a great way to create a sense of dynamism to a website. But it has to be very subtle, and done right. I sense most people’s knee-jerk reaction is to hate these, and I can understand why. I think the trick is to not break any expected UI conventions. So many flashy web experiences hijack the scroll, or create mystery buttons that aren’t clearly clickable. Harking back to Steve Krug’s mantra, “don’t make me think.” The best web design is so clear and intuitive, it rarely draws attention to itself. It’s like iOS animations, when closing an app, and seeing the app get sucked into it’s icon. It’s so quick and subtle, you barely notice it.
Kudos to the reduced motion advice at the end of the article, for better accessibility. I didn’t know this.
Kudos to the reduced motion advice at the end of the article, for better accessibility. I didn’t know this.
> “It’s like iOS animations, when closing an app, and seeing the app get sucked into it’s icon. It’s so quick and subtle, you barely notice it.”
it’s decidedly not quick and subtle. ios animations are blocking, so anytime i try to do things faster than the animation can finish, i very much notice it (particularly acutely when typing in my passcode). i hate that i have a “supercomputer” in my pocket and yet i can outpace it on a keyboard because of poor programming/user experience.
with that said, i agree that non-blocking and subtle animations do help us better intuit the user interface if done thoughtfully.
it’s decidedly not quick and subtle. ios animations are blocking, so anytime i try to do things faster than the animation can finish, i very much notice it (particularly acutely when typing in my passcode). i hate that i have a “supercomputer” in my pocket and yet i can outpace it on a keyboard because of poor programming/user experience.
with that said, i agree that non-blocking and subtle animations do help us better intuit the user interface if done thoughtfully.
Waiting for the content to make an entrance, before I can consume it, is so much fun! /s
When using animation delays, it's probably better to make the class include how long the delay is instead of just using 'animation-delay-1'. For example, Tailwind does this with transition delays, and it would definitely make the code clearer, imo.
https://tailwindcss.com/docs/transition-delay
https://tailwindcss.com/docs/transition-delay
Is getting old mostly about watching people rediscover the same mistakes over and over again? I think I am getting old.
I'm not exactly an expert CSS developer but surely the 'delay-1', ... 'delay-18' should be replaced with a wrapper class and something in the form of:
.delay-contents:nth-child(1) { animation-delay: 0.6s; } etc
.delay-contents:nth-child(1) { animation-delay: 0.6s; } etc
1997 called. It wants animated GIF icons back.
If you can make this happen without having the animations replay when I press the back button, that would be great.
> What if web content wouldn’t just “appear” when a page loaded, but instead popped, slid, faded, or spun into place?
What if ... no, thank you, get your 0.5 second delay and shove it where the sun don't shine?
What if ... no, thank you, get your 0.5 second delay and shove it where the sun don't shine?
What if the two big ads on the right hand panel popped into place in an obtrusive manner really capturing your attention!
i think it's always such a relief when i click on a link to any site, and the page loads, and there's no animated anything whatsoever.
[0] http://telnet.asia/n20fns.gif