Icon Animations

Why Animate Your Icons?

• Convey meaning or purpose.
• Convey change in status, purpose, or state.
• Bring attention to.
• Fun for users.

How Do Animate Icons?

• No need to reinvent the wheel. Search the internet for existing code for the animation you want.
• Understand CSS better than JavaScript? Define CSS classes to animate your icons.
• Understand JavaScript better than CSS? Write JavaScript code to animate your icons eternally or on certain events.
• Prefer JQuery to JavaScript? Make sure the JQuery library is included in your screen before writing your JQuery animation code.
• Know how to gif-ify better than coding? There are a variety of tools to create an animated gif image. These gifs can be used with CSS, JS, or JQuery to be switched in and out with static images.
• Prefer frame animation? Static images can be switched in and out on timed intervals to create the illusion of animation, which is essentially what all animation is anyways.

Where to start?

1. Pick your icon.
2. Determine what animation you would like your icon to have, giving consideration to duration, intention, and