当前位置：文江博客文章教程详情

AniJS 漂亮的 CSS 动画处理插件

发布于 2019-03-21 20:44:39 字数 4256 浏览 3527 评论 0

AniJS 是一个 CSS 动画的声明处理库，它能够使开发更便利且能提高开发速度，它文档完善且易于上手，不需要你有编程的基础技术就可以使用这个插件，而且免费开源，轻量级的CSS3动画插件，值得一用。

AniJS 定义了多种动画模式，比如 UI 元素抖动、界面翻转、元素的倾斜等，其核心的方法就是在元素的某个事件上添加或者删除某个 CSS 样式，达到预制的动画效果，官方也给出了很多个示例，点击这里查看更多。

特点

AniJS 是一个非常不错的网页特效设计解决方案，他具有以下的特点：

Easy to use.
Compact - around 7.7kb after gzipping.
There is no need for third party libraries.
Speed of development.
Better integration between coders and designers.

安装方法

QuickStart Template Fork on GitHub Download as ZIP Demo

Contributing

AniJS is like a little girl, she needs hungry and foolish community people to grow up healthy. All your issues, pull requests and stars ;) are welcome.

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request

使用方法

1、引入 AniJS 插件文件。

<script src="anijs-min.js"></script>

2、引入一些 CSS animation definitions。

<head>
    <!-- AniCollection.css library -->
    <link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css">
</head>

3、开始动画需要给对应 HTML 代码添加自定义属性 data-anijs

<body>
    <header data-anijs="if: click, do: flipInY animated">
        header
    </header>
    <nav data-anijs="if: scroll, on: window, do: swing animated, to: footer">
        nav
    </nav>
    <div id="main" data-anijs="if: mouseover, on: body, do: swing animated">
        if: load, on: window, do: swing animated
    </div>
    <footer>
        footer
    </footer>
    <script src="anijs-min.js"></script>
</body>

See a Codepen Example。