A Handy Little System for Animated Entrances in CSS

https://css-tricks.com/a-handy-little-system-for-animated-entrances-in-css/

by chmaynard • 5 years ago

41 12 5 years ago

css-tricks.com

Animats• 5 years ago

1997 called. It wants animated GIF icons back.

dmitriid• 5 years ago

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?

jrue• 5 years ago

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.

clairity• 5 years ago

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

alphabet9000• 5 years ago

most web pages already have lots of 'animated entrances' in the form of the entire page hopping around all over the place as elements are loaded via client side rendering, flashes of unstyled text, etc. for example, here's what this css-tricks webpage looks like when the page loads [0]. any CSS page loading animation you add to this page would have to 'compete' with the unsightly effects of the page trying to go through several steps to render itself.

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

xphx• 5 years ago

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

  * {
   animation: none !important;
   transition-property: none !important;
  }

This obviously does not affect scripted animations.

It would be nice if sites respected the prefers-reduced-motion browser media feature.

bryanrasmussen• 5 years ago

What if the two big ads on the right hand panel popped into place in an obtrusive manner really capturing your attention!

jebronie• 5 years ago

Waiting for the content to make an entrance, before I can consume it, is so much fun! /s

marginalia_nu• 5 years ago

If you can make this happen without having the animations replay when I press the back button, that would be great.

jamiethompson• 5 years ago

Is getting old mostly about watching people rediscover the same mistakes over and over again? I think I am getting old.

helsinkiandrew• 5 years ago

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

Cicero22• 5 years ago

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

A Handy Little System for Animated Entrances in CSS

Related Stories