.animated {

           

            background-repeat: no-repeat;

            background-position: left top;

            -webkit-animation-duration: 2s;

            animation-duration: 2s;

            -webkit-animation-fill-mode: both;

            animation-fill-mode: both;

         }

         

         @-webkit-keyframes bounceInDown {

            0% {

               opacity: 0;

               -webkit-transform: translateY(-2000px);

            }

            60% {

               opacity: 1;

               -webkit-transform: translateY(30px);

            }

            80% {

               -webkit-transform: translateY(-10px);

            }

            100% { 

               -webkit-transform: translateY(0);

            }

         }

         

         @keyframes bounceInDown {

            0% {

               opacity: 0;

               transform: translateY(-2000px);

            }

            60% {

               opacity: 1;

               transform: translateY(30px);

            }

            80% {

               transform: translateY(-10px);

            }

            100% {

               transform: translateY(0);

            }

         }

         

         .bounceInDown {

            -webkit-animation-name: bounceInDown;

            animation-name: bounceInDown;

         }







/*bounceinup css*/





   .animated {

            

            background-repeat: no-repeat;

            background-position: left top;

            -webkit-animation-duration: 2s;

            animation-duration: 2s;

            -webkit-animation-fill-mode: both;

            animation-fill-mode: both;

         }

         

         @-webkit-keyframes bounceInUp {

            0% {

               opacity: 0;

               -webkit-transform: translateY(2000px);

            }

            60% {

               opacity: 1;

               -webkit-transform: translateY(-30px);

            }

            80% {

               -webkit-transform: translateY(10px);

            }

            100% {

               -webkit-transform: translateY(0);

            }

         }

         

         @keyframes bounceInUp {

            0% {

               opacity: 0;

               transform: translateY(2000px);

            }

            60% {

               opacity: 1;

               transform: translateY(-30px);

            }

            80% {

               transform: translateY(10px);

            }

            100% {

               transform: translateY(0);

            }

         }

         

         .bounceInUp {

            -webkit-animation-name: bounceInUp;

            animation-name: bounceInUp;

         }

         

         

/*   bouncein left css    */  

         

         



         .animated {

            

            background-repeat: no-repeat;

            background-position: left top; 

           -webkit-animation-duration: 2s; 

            animation-duration: 2s; 

            -webkit-animation-fill-mode: both;

            animation-fill-mode: both; 

         }

         

         @-webkit-keyframes bounceInLeft {

            0% {

               opacity: 0;

               -webkit-transform: translateX(-2000px);

            }

            60% {

               opacity: 1;

               -webkit-transform: translateX(30px);

            }

            80% {

               -webkit-transform: translateX(-10px);

            }

            100% {

               -webkit-transform: translateX(0);

            }

         }

         

         @keyframes bounceInLeft {

            0% {

               opacity: 0;

               transform: translateX(-2000px);

            }

            60% {

               opacity: 1;

               transform: translateX(30px);

            }

            80% {

               transform: translateX(-10px);

            }

            100% {

               transform: translateX(0);

            }

         }

         

         .bounceInLeft {

            -webkit-animation-name: bounceInLeft;

            animation-name: bounceInLeft;

         }

         

         

         

         

         

         

   /*  bounceinright  */  

         

         

         

         

             .animated {

            

            background-repeat: no-repeat;

            background-position: left top;

           -webkit-animation-duration: 2s;

            animation-duration: 2s;

            -webkit-animation-fill-mode: both;

            animation-fill-mode: both;

         }

         

         @-webkit-keyframes bounceInRight {

            0% {

               opacity: 0;

               -webkit-transform: translateX(2000px);

            }

            60% {

               opacity: 1;

               -webkit-transform: translateX(-30px);

            }

            80% {

               -webkit-transform: translateX(10px);

            }

            100% {

               -webkit-transform: translateX(0);

            }

         }

         

         @keyframes bounceInRight {

            0% {

               opacity: 0;

               transform: translateX(2000px);

            }

            60% {

               opacity: 1;

               transform: translateX(-30px);

            }

            80% {

               transform: translateX(10px);

            }

            100% {

               transform: translateX(0);

            }

         }

         

         .bounceInRight {

            -webkit-animation-name: bounceInRight;

            animation-name: bounceInRight;

         }