.l-t-r{opacity: 0;transform: translateX(-20px);transition: all 1s;}
.l-t-r.scrollin {opacity: 1;transform: translate(0);}
.b-t-t{opacity: 0;transform: translateY(20px);transition: all 1s;}
.b-t-t.scrollin {opacity: 1;transform: translateY(0);}

@-webkit-keyframes passing-bar{
0% {left: 0;right: auto;width: 0;}
50% {left: 0;right: auto;width: 101%;}
51% {left: auto;right: 0;width: 101%;}
100% {left: auto;right: 0;width: 0;}
}
@keyframes passing-bar{
0% {left: 0;width: 0;}
50% {left: 0;width: 101%;}
51% {left: 0;width: 101%;}
100% {left: 101%;width: 0;}
}
@-webkit-keyframes passing-inner{
0% { opacity: 0;}
70% { opacity: 0;}
100% { opacity: 1;}
}
@keyframes passing-inner{
0% { opacity:0;}
70% { opacity:0;}
100% { opacity:1;}
}

.passing .passing-box {display: block;text-align: center;}
.passing .passing-bar {position: relative;display: block;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);}
.passing .passing-bar:before {content: '';display: inline-block;width: 0;height: 100%;
position: absolute;left: 0;top: 0;z-index: 1;background: #222;}
.passing .passing-inner {opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);}
.passing.scrollin .passing-bar:before {-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
animation: passing-bar 1s ease 0s 1 normal forwards;}
.passing.scrollin .passing-inner {-webkit-animation: passing-inner 0s ease .5s 1 normal forwards;
animation:passing-inner 0s ease .5s 1 normal forwards;}