1、动画

在实用价值的前提之下，layui并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。但是layui的动画使用起来并不是特别方便，本文添加了一些css原生动画。

2、使用方式

动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如：
其中 layui-anim 是必须的，后面跟着的即是不同的动画类：
<div class="layui-anim layui-anim-up"></div>
循环动画，追加：layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>
内置css动画一览：

内置css动画一览.png

示例代码：

<div class="layui-anim layui-anim-up " style="height: 100px;width: 100px;background-color: #00F7DE;">
                从最底部往上滑入
            </div>
            <div class="layui-anim layui-anim-fadein "style="height: 100px;width: 100px;background-color: #00F7DE;margin-top: 30px;">
                渐现
            </div>
            <div class="layui-anim layui-anim-upbit "style="height: 100px;width: 100px;background-color: #00F7DE;margin-top: 30px;">
                微微往上滑入
            </div>
            <div class="layui-anim layui-anim-scale "style="height: 100px;width: 100px;background-color: #00F7DE;margin-top: 30px;">
                微微往上滑入
</div>

效果图.png

3、补充属性

上面加的动画,在页面一加载的时候就播放了，并且播放的时间也没有给出修改方法，翻看了源码（layui.css）找到了相关属性，对他们重新赋值即可。下面以layui-anim-up 动画为例，修改动画的播放时间。

.layui-anim {
    -webkit-animation-duration:.3s; /* Safari 和 Chrome的设置动画持续时间方法 */
    animation-duration: .3s;  /*IE10、Firefox 以及 Opera的设置动画持续时间方法 */
    -webkit-animation-fill-mode: both;  /*规定对象动画时间之外的状态为向前和向后填充模式都被应用。*/
    animation-fill-mode: both
}


.layui-anim-up {
    -webkit-animation-name: layui-up; 
    animation-name: layui-up
}
/*下面有两个动画规定方式,是针对于不同浏览器的,Chrome 和 Safari 需要前缀 -webkit-。*/
@-webkit-keyframes layui-upbit {
    from {    /*动画开始时属性值*/
        -webkit-transform: translate3d(0, 30px, 0);  /*动画开始时位置*/
        opacity: .3  /*不透明度*/
    }
    to {    /*动画结束时属性值*/
        -webkit-transform: translate3d(0, 0, 0);    /*动画结束时位置*/
        opacity: 1
    }
}
/*Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。*/
@keyframes layui-upbit {
    from {
        transform: translate3d(0, 30px, 0);
        opacity: .3
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

注：

观察上述源码后，发现无论是规定动画还是动画属性名称都有两种写法，这是为了适应不同的浏览器，Internet Explorer 10、Firefox 以及 Opera 对应着@keyframes 规则和 animation 属性,而Chrome 和 Safari 需要前缀 -webkit-（@-webkit-keyframes、-webkit-animation-duration等）

在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称;
规定动画的时长
这是原生css动画的规定方式，layui已经将这些做完了，我们直接用即可，也可按需修改。

@keyframes 规则和所有动画属性（Chrome 和 Safari 加上前缀 -webkit-即可）

动画属性.png

4、改进动画

在修改动画持续时间前，需要了解一下当样式表的来源不同时，样式的相应优先级顺序：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

        <div style=""></div>     <!--内联样式-->
        <style ></style>         <!-- 内部样式-->
        <link rel="stylesheet" type="text/css" href=""/>  <!--外部样式-->

上面的例子样式是引入的外部css文件，但我们轻易不要对源码修改，所以我们只需要在div上面添加内联样式或者内部样式，这里以内部样式为例，将layui-anim-up的持续时间改为5秒，即添加-webkit-animation-duration:5s;animation-duration: 5s;即可。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="layui/layui.js" ></script>
        <link rel="stylesheet" href="layui/css/layui.css" />
        <style type="text/css">
            #div1{
                -webkit-animation-duration:5s;
                animation-duration: 5s;
            }
        </style>
    </head>
    <body>
            <div class="layui-anim layui-anim-up "id="div1" style="height: 100px;width: 100px;background-color: #00F7DE;">
                从最底部往上滑入
            </div>
    </body>
</html>