Welcome to the enchanting world of CSS3 animations! In this guide, we’ll walk you through installing, implementing, and troubleshooting magical animations that can elevate your web projects to the next level. Let’s get started!

Demo

First things first, if you want to see these animations in action, check out the demo here.

Table of Contents

• Installation
• Getting Started
• Usage with JavaScript
• Usage with jQuery
• HTML & CSS Tips
• 🎊 Gulp and SCSS (SASS) Compiling
• ✅ Browser Support

Installation

Let’s get set up! You can install the magic.css library through various package managers.

• GitHub Package Registry: Package URL
  bash npm install @minimac/magic.css
• NPM: Package URL
  bash npm i magic.css
• YARN: Package URL
  bash yarn add magic.css

Getting Started

To begin using magic.css, simply include the CSS file in your HTML:

<link rel="stylesheet" href="yourpath/magic.css">

or the minified version:

<link rel="stylesheet" href="yourpath/magic.min.css">

Usage with JavaScript

Let’s add some magic using JavaScript!

First, include the class magictime and the desired animation class:

const selector = document.querySelector('.yourdiv');
selector.classList.add('magictime', 'puffIn');

Want to delay the magic? Set a timer!

function myFunction() {
    const selector = document.querySelector('.yourdiv');
    selector.classList.add('magictime', 'puffIn');
}
setTimeout(myFunction, 5000);

You can even create an infinite loop with delays:

setInterval(myFunction, 3000);

Usage with jQuery

Prefer jQuery? No problem! Here’s how you can achieve the same effects:

$('.yourdiv').hover(function () {
    $(this).addClass('magictime puffIn');
});

Like with JavaScript, you can delay the effects:

setTimeout(function() {
    $('.yourdiv').addClass('magictime puffIn');
}, 5000);

And for an infinite loop:

setInterval(function() {
    $('.yourdiv').toggleClass('magictime puffIn');
}, 3000);

HTML & CSS Tips

You can customize the animation duration by adjusting the magictime class:

.magictime {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

Remember, the default timing is 1 second! Want to set a specific duration for a particular animation? Use two classes:

.magictime.magic {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

🎊 Gulp and SCSS (SASS) Compiling

If you wish to customize your CSS, you can edit the SCSS files. Here’s how:

Go to the file magic.scss, comment or uncomment your desired animations, and run the commands:

bash
npm install
gulp

This will automatically generate new files for you!

✅ Browser Support

Ensure your animations work across major browsers:

Browser	Version
Chrome	31+
Firefox	31+
Safari	7+
iOS Safari	7.1+
Opera	27+
Android	4.1+
Android Chrome	42+
IE	10+
Opera Mini	Not supported

Troubleshooting

If you encounter issues while implementing CSS3 animations, here are some troubleshooting tips:

• Ensure your paths to CSS and JS files are correct.
• Confirm that your browser supports the CSS animations you’re using.
• Make sure there are no conflicting CSS styles affecting your elements.
• Consider testing your code in different browsers to isolate the problem.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.