помогите поменять анимацию, сейчас слева на право, а нужно справа на лево
setTimeout(function(){
$('.line').addClass('inview');
},1000)
.line-1 i, .line-3 i {
display: block;
position: absolute;
height: 100%;
width: 0;
background: #0cf
}
.line-1 {
left: 0;
top: 0
}
.line-1 {
background: #000;
-moz-transition: background .4s ease, width .4s ease-out;
-o-transition: background .4s ease, width .4s ease-out;
-webkit-transition: background .4s ease, width .4s ease-out;
transition: background .4s ease, width .4s ease-out;
width: 100%
}
.inview .line-2 {
background: #000;
}
.inview .line-4 {
background: #000;
}
.inview .line-1 {
-moz-transition: background .4s ease, width .4s ease-out;
-o-transition: background .4s ease, width .4s ease-out;
-webkit-transition: background .4s ease, width .4s ease-out;
transition: background .4s ease, width .4s ease-out;
width: 100%;
}
.line-1 i {
left: 0;
top: 0;
-moz-transition: width .4s ease-out 1.2s;
-o-transition: width .4s ease-out 1.2s;
-webkit-transition: width .4s ease-out;
-webkit-transition-delay: 1.2s;
transition: width .4s ease-out 1.2s
}
.line-2 {
top: 0;
right: 0
}
.inview .line-2 {
-moz-transition: background .4s ease, height .4s ease-out .4s;
-o-transition: background .4s ease, height .4s ease-out .4s;
-webkit-transition: background .4s ease, height .4s ease-out;
-webkit-transition-delay: 0s, .4s;
transition: background .4s ease, height .4s ease-out .4s;
height: 100%
}
.line-2 i {
top: 0;
left: 0;
-moz-transition: height .4s ease-out .8s;
-o-transition: height .4s ease-out .8s;
-webkit-transition: height .4s ease-out;
-webkit-transition-delay: .8s;
transition: height .4s ease-out .8s
}
.line-3 {
right: 0;
bottom: 0
}
.inview .line-3 {
-moz-transition: background .4s ease, width .4s ease-out .8s;
-o-transition: background .4s ease, width .4s ease-out .8s;
-webkit-transition: background .4s ease, width .4s ease-out;
-webkit-transition-delay: 0s, .8s;
transition: background .4s ease, width .4s ease-out .8s;
background: #000;
width: 100%
}
.line-3 i {
right: 0;
top: 0;
-moz-transition: width .4s ease-out .4s;
-o-transition: width .4s ease-out .4s;
-webkit-transition: width .4s ease-out;
-webkit-transition-delay: .4s;
transition: width .4s ease-out .4s
}
.line-4 {
bottom: 0;
left: 0
}
.inview .line-4 {
-moz-transition: background .4s ease, height .4s ease-out 1.2s;
-o-transition: background .4s ease, height .4s ease-out 1.2s;
-webkit-transition: background .4s ease, height .4s ease-out;
-webkit-transition-delay: 0s, 1.2s;
transition: background .4s ease, height .4s ease-out 1.2s;
height: 100%
}
.line-4 i {
bottom: 0;
left: 0;
-moz-transition: height .4s ease-out 0s;
-o-transition: height .4s ease-out 0s;
-webkit-transition: height .4s ease-out;
-webkit-transition-delay: 0s;
transition: height .4s ease-out 0s
}
.line-1, .line-3 {
height: 4.01px;
width: 0;
position: absolute;
}
.line-2, .line-4 {
width: 4.01px;
height: 0;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="line">
<div class="line-1">
<i></i>
</div>
<div class="line-3">
<i></i>
</div>
<div class="line-4">
<i></i>
</div>
</div>