miniMAC / magic
CSS3 Animations with special effects
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing miniMAC/magic in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context on-demand, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Overview (README excerpt)
Crawler view:tophat: magic --------------- CSS3 Animations with special effects. **(→ 3.1 kB gzip)** Demo Checkout the demo for the animations here **Table of Contents** • Installation • Getting Started • Usage with JavaScript • Usage with jQuery • HTML & CSS tips • :tada: Gulp and SCSS (SASS) compiling • :white_check_mark: Browser Support Installation **GitHub Package Registry** - Package url **NPM** - Package url **YARN** - Package url Getting Started Include the file **magic.css** or include the minified version **magic.min.css** or Usage with JavaScript This is a sample code for on hover effect with **JavaScript**. First, Include the class and then a desired animation class. If you want to load the animation after certain time, you can use this example: If you want to load the animation after certain time but with an infinite loop, you can use this example: Usage with jQuery This is a sample code for on hover effect with jQuery. First, Include the class and then the desired animation class. If you want to load the animation after certain time, you can use this example: If you want to load the animation after certain time but with infinite loop, you can use this example: HTML & CSS tips You can **change the time** of the animation by setting the class for example: **Default** CSS timing is: If you want to assign the **timing to a specific animation**, you can use the following code *(use 2 class)*: Animation Classes | MAGIC EFFECTS | BLING | STATIC EFFECTS | STATIC EFFECTS OUT | PERSPECTIVE | ROTATE | |---------------|-----------|---------------------|--------------------|------------------------|-------------| | magic | puffIn | openDownLeft | openDownLeftOut | perspectiveDown | rotateDown | | twisterInDown | puffOut | openDownRight | openDownRightOut | perspectiveUp | rotateUp | | twisterInUp | vanishIn | openUpLeft | openUpLeftOut | perspectiveLeft | rotateLeft | | swap | vanishOut | openUpRight | openUpRightOut | perspectiveRight | rotateRight | | | | openDownLeftReturn | | perspectiveDownReturn | | | | | openDownRightReturn | | perspectiveUpReturn | | | | | openUpLeftReturn | | perspectiveLeftReturn | | | | | openUpRightReturn | | perspectiveRightReturn | | | SLIDE | MATH | TIN | BOMB | BOING | ON THE SPACE | |------------------|-----------|-------------|--------------|--------------|---------------| | slideDown | swashOut | tinRightOut | bombRightOut | boingInUp | spaceOutUp | | slideUp | swashIn | tinLeftOut | bombLeftOut | boingOutDown | spaceOutRight | | slideLeft | foolishIn | tinUpOut | | | spaceOutDown | | slideRight | holeOut | tinDownOut | | | spaceOutLeft | | slideDownReturn | | tinRightIn | | | spaceInUp | | slideUpReturn | | tinLeftIn | | | spaceInRight | | slideLeftReturn | | tinUpIn | | | spaceInDown | | slideRightReturn | | tinDownIn | | | spaceInLeft | :tada: Gulp and SCSS (SASS) compiling --------------- If you want to customize the CSS files, now you will have the chance. For example, if you want to include only certain animations, you will have to go to this file: Comment or uncomment your desired file and run from terminal the following commands: and last command: **Automatically** this generate the new files! :white_check_mark: Browser Support --------------- **Browser** | Chrome | Firefox | Safari | iOS Safari | Opera | Android | Android Chrome | IE | Opera Mini --- | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: **Version** | 31+ | 31+ | 7+ | 7.1+ | 27+ | 4.1+ | 42+ | 10+ | :x: