.inner {
background: url(//www.trisit.co.th/wp-content/plugins/codenovo-portfolio/img/hover-bg.png) repeat top left;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
text-align: center;
-webkit-transform: translate3d(-100%, 0, 0);
-webkit-animation-duration: 0.15s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-moz-transform: translate3d(-100%, 0, 0);
-moz-animation-duration: 0.15s;
-moz-animation-timing-function: ease-out;
-moz-animation-fill-mode: forwards;
transform: translate3d(-100%, 0, 0);
animation-duration: 0.15s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
} .mix.hover-enter-top .inner {
-webkit-animation-name: slide_in_top;
-moz-animation-name: slide_in_top;
animation-name: slide_in_top;
}
.mix.hover-leave-top .inner {
-webkit-animation-name: slide_out_top;
-moz-animation-name: slide_out_top;
animation-name: slide_out_top;
} .mix.hover-enter-right .inner {
-webkit-animation-name: slide_in_right;
-moz-animation-name: slide_in_right;
animation-name: slide_in_right;
}
.mix.hover-leave-right .inner {
-webkit-animation-name: slide_out_right;
-moz-animation-name: slide_out_right;
animation-name: slide_out_right;
} .mix.hover-enter-bottom .inner {
-webkit-animation-name: slide_in_bottom;
-moz-animation-name: slide_in_bottom;
animation-name: slide_in_bottom;
}
.mix.hover-leave-bottom .inner {
-webkit-animation-name: slide_out_bottom;
-moz-animation-name: slide_out_bottom;
animation-name: slide_out_bottom;
} .mix.hover-enter-left .inner {
-webkit-animation-name: slide_in_left;
-moz-animation-name: slide_in_left;
animation-name: slide_in_left;
}
.mix.hover-leave-left .inner {
-webkit-animation-name: slide_out_left;
-moz-animation-name: slide_out_left;
animation-name: slide_out_left;
} @-webkit-keyframes slide_in_top {
0%   { -webkit-transform: translate3d(0, -100%, 0); }
100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slide_out_top {
0%   { -webkit-transform: translate3d(0, 0, 0); }
100% { -webkit-transform: translate3d(0, -100%, 0); }
}
@-moz-keyframes slide_in_top {
0%   { -moz-transform: translate3d(0, -100%, 0); }
100% { -moz-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slide_out_top {
0%   { -moz-transform: translate3d(0, 0, 0); }
100% { -moz-transform: translate3d(0, -100%, 0); }
}
@keyframes slide_in_top {
0%   { transform: translate3d(0, -100%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide_out_top {
0%   { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(0, -100%, 0); }
} @-webkit-keyframes slide_in_right {
0%   { -webkit-transform: translate3d(100%, 0, 0); }
100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slide_out_right {
0%   { -webkit-transform: translate3d(0, 0, 0); }
100% { -webkit-transform: translate3d(100%, 0, 0); }
}
@-moz-keyframes slide_in_right {
0%   { -moz-transform: translate3d(100%, 0, 0); }
100% { -moz-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slide_out_right {
0%   { -moz-transform: translate3d(0, 0, 0); }
100% { -moz-transform: translate3d(100%, 0, 0); }
}
@keyframes slide_in_right {
0%   { transform: translate3d(100%, 0, 0); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide_out_right {
0%   { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(100%, 0, 0); }
} @-webkit-keyframes slide_in_bottom {
0%   { -webkit-transform: translate3d(0, 100%, 0); }
100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slide_out_bottom {
0%   { -webkit-transform: translate3d(0, 0, 0); }
100% { -webkit-transform: translate3d(0, 100%, 0); }
}
@-moz-keyframes slide_in_bottom {
0%   { -moz-transform: translate3d(0, 100%, 0); }
100% { -moz-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slide_out_bottom {
0%   { -moz-transform: translate3d(0, 0, 0); }
100% { -moz-transform: translate3d(0, 100%, 0); }
}
@keyframes slide_in_bottom {
0%   { transform: translate3d(0, 100%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide_out_bottom {
0%   { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(0, 100%, 0); }
} @-webkit-keyframes slide_in_left {
0%   { -webkit-transform: translate3d(-100%, 0, 0); }
100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slide_out_left {
0%   { -webkit-transform: translate3d(0, 0, 0); }
100% { -webkit-transform: translate3d(-100%, 0, 0); }
}
@-moz-keyframes slide_in_left {
0%   { -moz-transform: translate3d(-100%, 0, 0); }
100% { -moz-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slide_out_left {
0%   { -moz-transform: translate3d(0, 0, 0); }
100% { -moz-transform: translate3d(-100%, 0, 0); }
}
@keyframes slide_in_left {
0%   { transform: translate3d(-100%, 0, 0); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide_out_left {
0%   { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}