随着前端技术的发展，通过HTML5和CSS3可以实现很多很炫的交互效果，带来很好的用户体验。然而，基于实用的前提，Layui并没有内置过多花俏的动画，Layui的动画全部采用CSS3，因此不支持ie8和部分不支持ie9（即ie8/9环境下没有动画）。
Layui的CSS3动画使用起来很简单，通过对元素赋值动画特定的class类名即可，有可能用到的class共有9个，分别是layui-anim（必须的，算是基类，后面跟的就是不同的动画类）、layui-anim-up（从最底部往上滑入）、layui-anim-upbit（微微往上滑入）、layui-anim-scale（平滑放大）、layui-anim-scaleSpring（弹簧式放大）、layui-anim-fadein（渐现）、layui-anim-fadeout（渐隐）、layui-anim-rotate（360度旋转）、layui-anim-loop（循环动画）。
具体用法如下：
1、从最底部往上滑入效果可以这么实现
<div class="layui-anim layui-anim-up"></div>
2、循环动画追加layui-anim-loop类
<div class="layui-anim layui-anim-rotate layui-anim-loop"></div>
是不是很简单？以前项目中用到了类似的CSS3动画，网上找了很多插件，效果还可以，但是比较麻烦，需要单独引用至少两个css文件和js文件。Layui已经实现了这些，很方便。具体代码可以看一下layui的源代码layui.css文件最后部分，大致从第3324行开始（2.1.2版本），有兴趣可以自己动手实现其他CSS3动画效果，别希望贤心把所有效果都做了。