Repaintless是一个CSS动画库,可以创建动画,易于使用。具有大量内置动画,如淡入,淡出,旋转,脉冲,幻灯片等。可以通过scss变量定制动画

github文档

Demo演示页面

There is a demo page for the library.(该库有一个演示页面)

Download下载

  1. 使用线下资源

    <link href="./repaintless/repaintless-css/repaintless.min.css" rel="stylesheet"></link>
  2. 使用npm下载

    npm install repaintless
  3. 使用Bower下载

    bower install repaintless

How to use使用

格式

<div class="element-adimated 动画名"></div>

需要做的就是在需要动画的元素身上设置动画类名即可

<div class="element-adimated tremble">抖动</div>

动画默认时间是一秒,通过添加”long“,short类来设置2s/0.5s动画,此外还可以通过“infinite ”来设置无限动画

<div class="element-adimated tremble short">抖动 动画快</div>
<div class="element-adimated tremble long">抖动  动画慢</div>
<div class="element-adimated tremble infinite">抖动 无限动画</div>

List of animations动画类名

此处列出了所有可能的动画。其中一些是默认循环的,它总是在名称旁边提到。希望动画列表会越来越长

动画类名翻译
slide-from-top滑动-从上
slide-from-bottom滑动-从下
slide-from-left滑动-从左
slide-from-right滑动-从右
slide-from-right-bottom滑动-从右下
slide-from-right-top滑动-从右上
slide-from-left-bottom滑动-从左下
slide-from-left-top滑动-从左上
slide-top-bottom (looped无限)滑动上下
slide-left-right (looped无限)左右滑动
tremble (looped无限)颤抖
fade-in淡入
fade-out消退
pulsate (looped无限)脉动
rotate回转
rotate-slide-from-right旋转滑动-从右
rotate-slide-from-left旋转滑动-从左
rotate-slide-from-top旋转滑动-从上
rotate-slide-from-bottom旋转滑动-从下
appear-from-right出现-从右
appear-from-left出现-从左
appear-from-top出现-从上
appear-from-bottom出现-从下
Last modification:May 14th, 2020 at 02:39 am
如果觉得我的文章对你有用,请随意赞赏