@charset "utf-8";
/* CSS Document */
#slider {
/*    position: absolute;
    width: 100px;
    height: 100px;
    background: blue;*/
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.sliderx {
/*    position: absolute;
    width: 100px;
    height: 100px;
    background: blue;*/
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);

}
.slide-in {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}
    
@keyframes slide-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
    100% { -webkit-transform: translateX(0%); }
}
    
@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}