本文共 1655 字,大约阅读时间需要 5 分钟。
本文为原创文章,转载请标明
是一款强大的、跨浏览器的预设CSS3动画库,内置了很多典型的CSS3动画,兼容性好使用方便,可以应用于我们的基于Ionic3的Hybrid App,在你可以看到各个动画的动画效果,现在最新的版本是3.5.2,强烈建议大家使用。
是基于上述 的SASS版本,不过已经两年没有更新了,止于3.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
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();}
如有不当之处,请予指正,谢谢~