https://github.com/philippebeck/animadio

CSS Library made with Sass
https://github.com/philippebeck/animadio

animations box-model css-variables css3 flexbox grid hsla-colors library scss transform

Last synced: 6 months ago
JSON representation

CSS Library made with Sass

• Host: GitHub
• URL: https://github.com/philippebeck/animadio
• Owner: philippebeck
• License: mit
• Created: 2019-02-27T15:23:45.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-21T10:54:34.000Z (almost 2 years ago)
• Last Synced: 2025-06-11T14:49:30.617Z (8 months ago)
• Topics: animations, box-model, css-variables, css3, flexbox, grid, hsla-colors, library, scss, transform
• Language: SCSS
• Homepage: https://www.npmjs.com/package/animadio
• Size: 7.35 MB
• Stars: 22
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# [Animadio CSS Library](https://animadio.org)

[![NPM Version](https://badgen.net/npm/v/animadio)](https://www.npmjs.com/package/animadio)

[![NPM Downloads](https://badgen.net/npm/dy/animadio)](https://www.npmjs.com/package/animadio)

[![jsDelivr Yearly Downloads](https://img.shields.io/jsdelivr/npm/hy/animadio)](https://www.jsdelivr.com/package/npm/animadio)

[![GitHub Last Commit](https://img.shields.io/github/last-commit/philippebeck/animadio.svg?label=Last+Commit)](https://github.com/philippebeck/animadio/commits/master)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/0346a8c0d14a4b5984eb30f7282f80b9)](https://www.codacy.com/gh/philippebeck/animadio/dashboard)

[![Maintainability](https://api.codeclimate.com/v1/badges/0b594827e537b04dcea0/maintainability)](https://codeclimate.com/github/philippebeck/animadio/maintainability)

[![GitHub Top Language](https://img.shields.io/github/languages/top/philippebeck/animadio)](https://github.com/philippebeck/animadio)

[![Code Size](https://img.shields.io/github/languages/code-size/philippebeck/animadio)](https://github.com/philippebeck/animadio/tree/master)

-   Six types of selectors, working with hover & focus for some of them

-   **Flexbox & Grid** systems included with common options

-   Management of **keyframes animations** & their options

-   Complete & simple customization with directly modifiable **CSS variables**

## Summary

- [Animadio CSS Library](#animadio-css-library)

  - [Summary](#summary)

  - [Package](#package)

  - [CDN](#cdn)

  - [Download](#download)

  - [Content](#content)

  - [Documentation](#documentation)

---

## Package

-  NPM : `npm i animadio`  

-  Yarn : `yarn add animadio`  

---

## CDN 

-   Development : [https://cdn.jsdelivr.net/npm/animadio@6.2.7/dist/animadio.css](https://cdn.jsdelivr.net/npm/animadio@6.2.7/dist/animadio.css)  

-   Production : [https://cdn.jsdelivr.net/npm/animadio@6.2.7/dist/animadio.min.css](https://cdn.jsdelivr.net/npm/animadio@6.2.7/dist/animadio.min.css)  

---

## Download

-  [Latest Release](https://github.com/philippebeck/animadio/releases)  

-  `git clone https://github.com/philippebeck/animadio.git`  

  

---

## Content

-   For development : `/dist/animadio.css`  

-   For production : `/dist/animadio.min.css`  

-   For CSS var overloading : `/dist/style.css`  

---

## Documentation

[Animadio Lab !](https://codepen.io/philippebeck/pen/QWVrebX)