Category: css animation

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise: The original gradient infinity. After four hours and some twenty minutes, of which over four hours were spent on tweaking positioning, edges and highlights… I finally had the result below: My vers...

The State of Changing Gradients with CSS Transitions and Animations

Back in 2012, Internet Explorer 10 came out and, among other things, it finally supported CSS gradients and, in addition to that, the ability to animate them with just CSS! No other browser supported this at the time, but I was hopeful for the future. Sadly, six years have passed and nothing has changed in this departm...

Animating Progress

Jonathan Snook on the complexity of animating the <progress> element. If you’re unfamiliar, that’s the element that spits out a bar chart-like visual that indicates a position between two values: This example has custom styles, but you get the point. Jonathan’s post shows off a method for animating a ...

Inspiration for Search UI Effects

View demo Download source Today we’d like to share a couple of ideas for search interaction effects with you. Mainly, we’d like to provide you with some inspiration for how to show the search interface in an interesting way. Maybe you’ve seen some modern animations for showing the search already, lik...

A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend? Having worked with a slew of them, I can tell you there is no right answer. It’s a complicated question and complicated answer. This post serves to clarify what to use, and when, to get you working with the right tool for the job. If ...