animio.css

Slide Animations 🎬

A lightweight and easy-to-use collection of CSS animations to bring your web elements to life! Add smooth sliding, fading, bouncing, rotating, zooming, and more to your UI components effortlessly. Customize speeds, directions, and effects for maximum creativity. ✨

# animio.css 🎨✨

Welcome to **animio.css**! This package provides a collection of lightweight and easy-to-use CSS animations to add life and motion to your web projects. Whether you're looking for subtle transitions or eye-catching animations, **animio.css** has got you covered!

## Features 🚀
- Easy-to-use animations for any web project.
- Lightweight and performance-optimized.
- Compatible with all modern browsers.
- Customizable animation properties.

## Installation 📦

To quickly use **animio.css** without downloading, you can include it directly via **jsDelivr**:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animio.css@1.0.0/dist/Animio.css">

Usage 📖

Once included, you can start applying animation classes to your HTML elements:

<div class="slide-in-right">I'm animated! 🎉</div>

Animations Overview 🎉

Slide Animations 🛝

• In Animations:

  • slide-in-left: Slide in from the left.
  • slide-in-right: Slide in from the right.
  • slide-in-top: Slide in from the top.
  • slide-in-bottom: Slide in from the bottom.

• Out Animations:

  • slide-out-left: Slide out to the left.
  • slide-out-right: Slide out to the right.
  • slide-out-top: Slide out to the top.
  • slide-out-bottom: Slide out to the bottom.

• Speed Variants:

  • slide-left-fast, slide-right-fast: Slide in quickly.
  • slide-left-slow, slide-right-slow: Slide in slowly.

Fade Animations 🌫️

• Basic:

  • fade-in: Fade in.
  • fade-out: Fade out.

• Speed Variants:

  • fade-in-fast, fade-out-fast: Fade in/out quickly.
  • fade-in-slow, fade-out-slow: Fade in/out slowly.
  • fade-in-quick, fade-out-quick: Fade in/out very quickly.
  • fade-in-slower, fade-out-slower: Fade in/out even slower.

Bounce Animations 🏀

• bounce: General bounce effect.

• bounce-in: Bounce in.

• bounce-out: Bounce out.

• Speed Variants:

  • bounce-quick, bounce-slow: Bounce quickly or slowly.
  • bounce-in-quick, bounce-out-quick: Bounce in/out quickly.

Rotate Animations 🔄

• rotate-90, rotate-180, rotate-360: Rotate elements by 90, 180, or 360 degrees.

• Clockwise / Counterclockwise:

  • rotate-clockwise: Rotate clockwise.
  • rotate-counterclockwise: Rotate counterclockwise.

• Other Angles:

  • rotate-45, rotate-135, rotate-225, rotate-315: Rotate elements by specific angles.

• Infinite Rotation:

  • rotate-infinite: Rotate continuously (forever).

Zoom Animations 🔍

• Basic:

  • zoom-in: Zoom in.
  • zoom-out: Zoom out.

• Speed Variants:

  • zoom-in-fast, zoom-out-fast: Zoom in/out quickly.
  • zoom-in-slow, zoom-out-slow: Zoom in/out slowly.
  • zoom-in-medium, zoom-out-medium: Zoom in/out at medium speed.
  • zoom-in-slowest, zoom-out-slowest: Zoom in/out very slowly.

Flip Animations 🔄

• Basic:

  • flip-horizontal: Flip horizontally.
  • flip-vertical: Flip vertically.
  • flip-diagonal: Flip diagonally.

• Special:

  • flip-3d: 3D flip effect.
  • flip-x-reverse, flip-y-reverse: Reverse horizontal or vertical flip.

Shake Animations 🌪️

• Basic:

  • shake: General shaking effect.
  • shake-horizontal: Shake horizontally.
  • shake-vertical: Shake vertically.

• Special:

  • shake-diagonal: Shake diagonally.
  • shake-rotate: Shake with rotation.
  • shake-infinite: Shake continuously.

Pulse Animations 💓

• pulse: Standard pulse effect.
• Speed Variants:
  • pulse-fast, pulse-slow: Pulse quickly or slowly.
  • pulse-slower, pulse-fastest: Pulse even slower or very quickly.
  • pulse-medium: Pulse at medium speed.

Slide and Fade Animations 💨

• In/Out:

  • slide-fade-in-left: Slide in from the left and fade in.
  • slide-fade-in-right: Slide in from the right and fade in.
  • slide-fade-out-left: Slide out to the left and fade out.
  • slide-fade-out-right: Slide out to the right and fade out.

• Speed Variants:

  • slide-fade-left-quick, slide-fade-right-quick: Slide and fade in/out quickly.

Expand and Collapse Animations 📏

• Basic:

  • expand: Expand an element.
  • collapse: Collapse an element.

• Speed Variants:

  • expand-fast, collapse-fast: Expand/Collapse quickly.
  • expand-medium, collapse-medium: Expand/Collapse at medium speed.
  • expand-slowest, collapse-slowest: Expand/Collapse very slowly.

Swing Animations 🎢

• Basic:

  • swing: Standard swinging motion.

• Speed Variants:

  • swing-fast, swing-slow: Swing quickly or slowly.
  • swing-medium: Swing at medium speed.
  • swing-quickest, swing-slowest: Swing very quickly or very slowly.

3D Animations 🌀

• Rotation:

  • rotate-x: Rotate around the X-axis.
  • rotate-y: Rotate around the Y-axis.
  • rotate-z: Rotate around the Z-axis.

• Speed Variants:

  • rotate-x-fast, rotate-y-fast, rotate-z-fast: Rotate quickly around X, Y, or Z axis.

Custom Animations 🛠️

• Sliding:

  • custom-slide-left, custom-slide-right: Customizable slide in from left/right.
  • custom-slide-top, custom-slide-bottom: Customizable slide in from top/bottom.

• Fading:

  • custom-fade-in, custom-fade-out: Customizable fade in/out.

Special Effects 🌟

• glow: Create a glowing effect.

• shadow: Add a shadow effect.

• color-change: Gradually change the color of an element.

• Speed Variants:

  • glow-fast, shadow-fast, color-change-fast: Fast versions of glowing, shadowing, and color change.

---

Contributing 🤝

Contributions are welcome! Feel free to open issues or submit pull requests to improve this package.

License 📄

This project is licensed under the MIT License. Feel free to use, modify, and distribute as needed.

---