前端框架Layui的CSS3動畫類—快速實現動畫效果

隨著前端技術的發展，通過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動畫效果，別希望賢心把所有效果都做了。

相關鏈接：你家隔壁程序猿推薦一款優秀的模塊化UI框架-Layui