/*
|--------------------------------------------------------------------------
| Mark Learn & Develop
| Animation Library
|--------------------------------------------------------------------------
*/


/*==============================================================
    Fade Up
==============================================================*/

.fade-up{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==============================================================
    Fade Down
==============================================================*/

.fade-down{

    animation:fadeDown .8s ease both;

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-35px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/*==============================================================
    Fade Left
==============================================================*/

.fade-left{

    animation:fadeLeft .8s ease both;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/*==============================================================
    Fade Right
==============================================================*/

.fade-right{

    animation:fadeRight .8s ease both;

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/*==============================================================
    Zoom In
==============================================================*/

.zoom-in{

    animation:zoomIn .6s ease both;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/*==============================================================
    Floating
==============================================================*/

.float{

    animation:floating 5s ease-in-out infinite;

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==============================================================
    Pulse
==============================================================*/

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}


/*==============================================================
    Rotate
==============================================================*/

.rotate{

    animation:rotate 12s linear infinite;

}

@keyframes rotate{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==============================================================
    Shine Button
==============================================================*/

.btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:rgba(255,255,255,.25);

    transform:skewX(-25deg);

}

.btn:hover::before{

    left:140%;

    transition:.8s;

}