@keyframes showLeft{
    0% {opacity: 0;left:-100px;}
    5% {opacity: 0.05;left:-95px;}
    10% {opacity: 0.1;left:-90px;}
    15% {opacity: 0.15;left:-85px;}
    20%{opacity: 0.2;left:-80px;}
    25% {opacity: 0.25;left:-75px;}
    30%{opacity: 0.3;left:-70px;}
    35% {opacity: 0.35;left:-65px;}
    40%{opacity: 0.4;left:-60px;}
    45% {opacity: 0.45;left:-55px;}
    50%{opacity: 0.5;left:-50px;}
    55% {opacity: 0.55;left:-45px;}
    60%{opacity: 0.6;left:-40px;}
    65% {opacity: 0.65;left:-35px;}
    70%{opacity: 0.7;left:-30px;}
    75% {opacity: 0.75;left:-25px;}
    80%{opacity: 0.8;left:-20px;}
    85% {opacity: 0.85;left:-15px;}
    90%{opacity: 0.9;left:-10px;}
    95% {opacity: 0.95;left:-5px;}
    100% {opacity: 1}
}

@keyframes show-transform45 {
    0% {opacity: 0;
        transform: rotate(-45deg) scale(0.5,0.5);
        transform-origin:left bottom;
    }
    50% {opacity: 0.5;
        transform:rotate(5deg) scale(1.05,1.05);

        transform-origin:left bottom;
    }
    100% {opacity: 1;
        transform: rotate(0deg);
    }

}
@keyframes show-transform-45 {
    0% {opacity: 0;
        transform: rotate(45deg) scale(0.5,0.5);
        transform-origin:right bottom;
    }
    50% {opacity: 0.5;
        transform:rotate(5deg) scale(1.05,1.05);

        transform-origin:left bottom;
    }
    100% {opacity: 1;
        transform: rotate(0deg);
    }

}


@keyframes show-scale05 {
    0% {opacity: 0;
        transform:rotateY(90deg);
        perspective:200px;
    }
    50% {opacity: 0.5;
        transform:scale(1.05,1.05);

        transform-origin:top;
    }
    100% {opacity: 1;transform:rotateY(0deg)
    }

}
@keyframes show-scale-05 {
    0% {opacity: 0;
        transform:rotate(5deg) scale(0.95,0.95);
        transform-origin:left bottom;
    }
    50% {opacity: 0.5;
        transform:rotate(-5deg) scale(1.02,1.02);

        transform-origin:right bottom;
    }
    100% {opacity: 1;
    }

}

@keyframes opacity1 {
    0% {opacity: 0;}
    5% {opacity: 0.05;}
    10% {opacity: 0.1;}
    15% {opacity: 0.15;}
    20%{opacity: 0.2;}
    25% {opacity: 0.25;}
    30%{opacity: 0.3;}
    35% {opacity: 0.35;}
    40%{opacity: 0.4;}
    45% {opacity: 0.45;}
    50%{opacity: 0.5;}
    55% {opacity: 0.55;}
    60%{opacity: 0.6;}
    65% {opacity: 0.65;}
    70%{opacity: 0.7;}
    75% {opacity: 0.75;}
    80%{opacity: 0.8;}
    85% {opacity: 0.85;}
    90%{opacity: 0.9;}
    95% {opacity: 0.95;}
    100% {opacity: 1}

}

@keyframes showUp {
    0%{
         margin-top: 100px;
         opacity: 0;
     }
    0%{
        margin-top: 10px;
        opacity: 1;
    }
}

.show-in-left{
    animation: showLeft 2s  ;
    animation-fill-mode: both;
}
.show-in-up{
    animation: showUp 3s  ;
    animation-fill-mode: both;
}

.transform45{
    animation: show-transform45 3s  ;
    animation-fill-mode: both;
}
.transform-45{
    animation: show-transform-45 3s  ;
    animation-fill-mode: both;
}
.scale05{
    animation: show-scale05 2s  ;
    animation-fill-mode: both;
}
.scale-05{
    animation: show-scale-05 3s  ;
    animation-fill-mode: both;
}