Other bonuses: CSS animation takes better advantage of hardware acceleration for rendering them. Also, pure CSS effects make for easier graceful degradation and/or progressive enhancement. Too often I’ve seen JS implemented in a way that, when it breaks, content just disappears altogether. It doesn’t need to be done that way, but it often is.
So have a look at some of the purely CSS options here, and see if there’s anything that could work for you.
For an alternative implementation and more ideas, look no further than this example by Joshua Bemenderfer.
That’s right! Slideshows and carousels can be implemented in pure CSS. We’re so used to using jQuery for this sort of thing that even now, it’s a little hard to fathom. But it’s doable. I’d like to thank the guys at Speckyboy for compiling this list of carousel options.
Here are a couple of quick examples from the list:
Ah, drop-downs. Actually, this is probably the UI element that got a JS-free implementation before anything else. I remember when just about every design blog was full of ideas for how to get drop-down menus with this new-fangled CSS thing that was just catching on. It’s safe to say that these techniques are pretty well-supported by now.
Here’s a quick and easy example on Codepen by Andor Nagy.
Modal Windows and Image Galleries
Want to have hidden content, and then show that content on a click? Turns out CSS can do that, too, all by itself. You can, of course, create simple modal windows, but you can also create full on image galleries.
For modal windows, we have a post on our own site. There are ten examples there, so that should be plenty of variety. One of the best image gallery examples I’ve found so far is by a GitHub user known only as mas-5. Here’s a link to the main repo, and here’s a quick demo.
Button and Hover Effects
Okay, this was probably the thing that CSS developers started on right after dropdown menus. Thus, enterprising CSS3 experts have had years to come up with a variety of interesting effects to apply to buttons, menus, and pretty much anything that uses the :hover interaction on a website. The semi-recently upgraded animation capabilities of HTML5 and canvas, plus the semi-recent surge of support for SVG, have given designers a lot to work with.
For examples, Free Frontend has compiled a list of 17 CSS Hover Effects for you to play with. As for buttons specifically, you could check out this button pack by Christophe Guerrin. Lastly, I’d like to highlight this ripple effect by Pau Giner. It’s simple, but cool.
Random Typewriter Effect
I didn’t really have a category for this, so just… here. Look. It’s that typewriter effect people keep using JS for. You don’t have… I’m sure you get the point by now in the article. It’s by Geoff Graham writing for CSS-Tricks.
To exhort and expound on the possibilities of CSS would be, at this point in the article, a little redundant. But I’m going to do it anyway: This is an age of nearly unprecedented support for relatively new CSS modules. You don’t have to wait a decade for transparent PNGs anymore. These things happen faster.