Bootstrap4 Navbar Animation

by ShadowKao

HTML

<!doctype html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
       <style type="text/css">
           

     /*定義動畫執行多久完成，一般都是300ms~800ms就差不多*/
    ul.navbar-nav > li {
    animation-duration: 0.4s;
    }
 




/*定義CSS動畫效果(淡入、由右往左移)*/
@keyframes animation-li1 {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes animation-li2 {
    0% {
        opacity: 0;
        transform: translateX(40px); /*+10*/
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes animation-li3 {
    0% {
        opacity: 0;
        transform: translateX(60px);/*加20*/
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes animation-li4 {
    0% {
        opacity: 0;
        transform: translateX(90px);/*加30*/
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes animation-li5 {
    0% {
        opacity: 0;
        transform: translateX(130px);/*加40*/
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes animation-li6 {
    0% {
        opacity: 0;
        transform: translateX(180px); /*加50*/
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
@keyframes animation-li7 {
    0% {
        opacity: 0;
        transform: translateX(240px); /*加60*/
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
@keyframes animation-li8 {
    0% {
        opacity: 0;
        transform: translateX(310px); /*加70*/
    }

    100% {
 ...