随着前端技术的发展，通过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（循环动画）。

作为前端开发者，相信大家对 CodePen 不是很陌生。它是一个非常了不起的网站，在上面大家不仅可以分享自己的 Web 作品，而且可以欣赏到世界各地的优秀开发者实现的各种酷炫效果。当然，你也可以从这里获取一些小灵感。

在本文中，小狮将与大家分享一些超炫的 CSS 动画效果。当然，除了欣赏外，有些Demo的作者也给出了具体实现的方法，值得我们去学习与借鉴。那么，一起来Enjoy吧！

点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

好雨知时节，当春乃发生。 随风潜入夜，润物细无声。

春节已经过去，新的一年刚刚开始，小伙伴们，今年你的目标是什么？定个小目标，挣它一个亿？分享一下我的目标，是让大家的web前端能力，更上一层楼。