magic

Magic.css is a small CSS library that adds animated visual effects to elements on a webpage. The library weighs about 3.1 kilobytes when compressed, which is very lightweight for what it provides. It works by adding CSS class names to HTML elements: you give an element the class magictime plus the name of a specific animation, and the element plays that animation.

The available animations fall into several named groups: effects with names like puffIn, vanishOut, and swapIn for appearing and disappearing; slide effects that move elements from different directions; perspective effects that tilt elements toward or away from the viewer; and more dramatic effects grouped under names like Bomb, Boing, and Space. The full list of animation class names is documented in a table in the README.

You can trigger these animations through plain JavaScript by adding the class names in code, or through jQuery using similar methods. The README includes short code examples for common patterns: playing an animation on hover, playing it after a delay, or repeating it on an interval.

Animation timing defaults to one second but can be changed by overriding the magictime CSS class or by targeting a specific animation class. The source is written in SCSS (a CSS preprocessor format), and a Gulp build step is included so you can customize which animations to include before generating the final CSS files. The library supports modern versions of Chrome, Firefox, Safari, Opera, and Android browsers, but not Opera Mini.

Installation is through npm or Yarn. The package can also be used by downloading the compiled CSS file and linking to it directly in an HTML page.