1

помогите поменять анимацию, сейчас слева на право, а нужно справа на лево

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>

1 ответ 1

1

Найдите два отличия? Ну можно было бы и самому догадаться, простая же логика)) Абсолютное позиционирование position: absolute; элементов. Те что по левому краю left:0, перенести на правый right:0. Ну и наоборот. В анимации принимают участие простые свойства - ширина width и высота height - меняется значение от 0 до 100%. Ничего сложного.

setTimeout(function() {
  $('.line').addClass('inview');
}, 1000)
.line-1 i,
.line-3 i {
  display: block;
  position: absolute;
  height: 100%;
  width: 0;
  background: #0cf
}

.line-1 {
  right: 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 {
  right: 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;
  left: 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;
  right: 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 {
  left: 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 {
  left: 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;
  right: 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;
  right: 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.