Himas Rafeek
Posted on: 2 years ago
CSS

animate website on load (opacity, fade)

Just add 2 classed (animated fadeInDown) to body


                                          /*  ...  */ .fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
 .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
 @-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
 @keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}