/*  css animation  */
.trans
{
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}/* page animation  */
.ani-view
{
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInDown
{
    0%
    {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    100%
    {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes fadeInDown
{
    0%
    {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
    100%
    {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}
@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;-o-transform:translateY(0)}}
@keyframes fadeInDown
{
    0%
    {
        opacity: 0;
        transform: translateY(20px);
    }
    100%
    {
        opacity: 1;
        transform: translateY(0);
    }
}
.ani-view.fade-in-down
{
    opacity: 0;
    opacity: 1\0/IE9;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    -ms-transform: translateY(0)\0/IE9;
}
.ani-view.fadeInDown
{
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft
{
    0%
    {
        opacity: 0;
        -webkit-transform: translateX(-100px);
    }
    100%
    {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes fadeInLeft
{
    0%
    {
        opacity: 0;
        -moz-transform: translateX(-100px);
    }
    100%
    {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-100px)}100%{opacity:1;-o-transform:translateX(0)}}
@keyframes fadeInLeft
{
    0%
    {
        opacity: 0;
        transform: translateX(-100px);
    }
    100%
    {
        opacity: 1;
        transform: translateX(0);
    }
}
.ani-view.fade-in-left
{
    opacity: 0;
    opacity: 1\0/IE9;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px);
    -ms-transform: translateX(0)\0/IE9;
}
.ani-view.fadeInLeft
{
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight
{
    0%
    {
        opacity: 0;
        -webkit-transform: translateX(100px);
    }
    100%
    {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes fadeInRight
{
    0%
    {
        opacity: 0;
        -moz-transform: translateX(100px);
    }
    100%
    {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
@-ms-keyframes fadeInRight
{
    0%
    {
        opacity: 0;
        -ms-transform: translateX(100px);
    }
    100%
    {
        opacity: 1;
        -ms-transform: translateX(0);
    }
}
@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(100px)}100%{opacity:1;-o-transform:translateX(0)}}
@keyframes fadeInRight
{
    0%
    {
        opacity: 0;
        transform: translateX(100px);
    }
    100%
    {
        opacity: 1;
        transform: translateX(0);
    }
}
.ani-view.fade-in-right
{
    opacity: 0;
    opacity: 1\0/IE9;
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
    -ms-transform: translateX(0)\0/IE9;
}
.ani-view.fadeInRight
{
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
}