CSS Animation Ideas That Feel Right Rather Than Buzzy
Most CSS animation I see is either absent or excessive. Here are the patterns I use to keep animation in the middle ground. Animation is one of those design elements that I underused for years and then overused when I finally learned it. Both phases produced bad work. The underuse meant interfaces felt frozen, with state changes snapping instantly. The overuse meant everything moved and nothing felt stable. After enough iterations I have settled on a small set of CSS animation patterns that I return to because they feel right rather than buzzy. Here are those patterns. Use Transitions for State, Keyframes for Loops The first distinction I had to internalize was between transitions and animations. A transition responds to a state change: hover, focus, a class added by JavaScript. An animation defined by keyframes runs on its own timeline, looping or running once and stopping. The two are not interchangeable, and using one when the other fits produces the slightly wrong feeling I see in many interfaces. I use transitions for anything triggered by a user action: a button that grows slightly on hover, a panel that fades in when opened, an icon that rotates when the menu expands. More guides are on the Spark Blog.