本文共 1655 字，大约阅读时间需要 5 分钟。

本文为原创文章，转载请标明

目录

1. 前言
2. 的使用
3. 的使用

1. 前言

是一款强大的、跨浏览器的预设CSS3动画库，内置了很多典型的CSS3动画，兼容性好使用方便，可以应用于我们的基于Ionic3的Hybrid App，在你可以看到各个动画的动画效果，现在最新的版本是3.5.2，强烈建议大家使用。

是基于上述 的SASS版本，不过已经两年没有更新了，止于3.2.2版本，不过也包含了 的大部分动画，不妨碍我们的使用。

下面是我的真机调试效果：

2. 的使用

animate.css GitHub地址

可在 查看具体动画效果

使用方法：

(1) 在 ./src/assets 文件夹下创建 css 文件夹，将 animate.css 拷贝到 ./src/assets/css 文件夹下

(2) 在 ./src.index.html 中导入 animate.css

(3) 对你要添加动画的对象加上指定的动画，如：我在 ./src/pages/exam/exam.html 文件中添加

   
    ......
   

如果想要动画效果永远存在，可以加上 infinite 字段,如：我在 ./src/pages/exam/exam.html 文件中添加

   
    ......
   

支持的动画效果有如下：

bounceflashpulserubberBandshakeheadShakeswingtadawobblejellobounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingejackInTheBoxrollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp

3. 的使用

animate.scss GitHub地址

(1) 在 ./src/assets 文件夹下创建 animate 文件夹，将 git clone 下来的文件夹下的所有文件拷贝到 animate 文件夹下。

(2) 在 ./src/app/app.scss 文件中导入 animate.scss

@import "../assets/animate/animate.scss";

(3) 对你要添加动画的对象加上指定的动画，如：我在 ./src/pages/exam/exam.scss 文件中添加

ion-card {    @include bounceIn();}

如有不当之处，请予指正，谢谢～