All Posts

CSS Keyframe Animations post

While building the refreshable lists feature of the Ninja Forms THREE newsletter action, I wanted to provide some visual feedback while awaiting the response from the server with the new list content. I'm normally the PHP developer at the office, with James as the CSS developer, so I reached out to him to add the CSS for a spinning dashicon.

Instead of just writing the CSS, James walked me through the basics of CSS Animations and how to apply it to a dashicon. Below is a mockup of the interaction for refreshable lists:

See the Pen Spinning Dashicon by Kyle B. Johnson (@kjohnson) on CodePen.

The animation is broken down into two parts:

  1. The Selector Usage ex. animation: dashicons-spin 1s infinite;
  2. The Keyframe Declaration ex. @keyframes dashicons-spin

The animation's keyframes are declared separate from its usage, with a @keyframes declaration, followed by an animation name, then the individual frame properties. Each frame property is marked with a percent, indicating the point of progress, with styles for that point in the animation.

Our dashicon-spin example is a simple animation, which rotating the dashicon from a starting point (0%) of 0 degrees (0deg) to an end point (100%) of 360 degrees (360deg).

See the Pen Spinning Dashicon by Kyle B. Johnson (@kjohnson) on CodePen.

Note: For a continuous animation, I had to specify an timing function of 'linear', as the animation uses some ease by default.

Finished Product


More Resources