Как добавить два переходных преобразования, но одно за другим?

Question

Я хочу добавить 2 переходных преобразования

Но я хочу начать второе преобразование после окончания первого преобразования

элемент должен идти в точку медленно и после этого он должен идти в другую точку

transform: translate(0%, 300%), translate(15%, -136%);

Answer 1

Вы не можете сделать это только с одним элементом, используя transition потому что, когда вы помещаете более одного перевода в преобразование, свойство преобразования в целом изменяется, а не одно за другим.

С чистым переходом CSS с использованием дополнительного элемента-обёртки:

Если вы добавите дополнительный элемент-обертку вокруг фактического элемента и поместите одно из преобразований в элемент-обертку, вы сможете добиться желаемого эффекта. Это также приведет к точному обратному эффекту при наведении (наведите тело и наведите курсор на приведенный ниже фрагмент).

.wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  transition: all 1s 1s;
}
.content {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 1px solid;
  transition: all 1s;
}
body:hover .content {
  transform: translate(15%, -136%);
  transition: all 1s 1s;
}
body:hover > .wrapper {
  transform: translate(0%, 300%);
  transition: all 1s;
}
body {
  min-height: 100vh;
}

<div class='wrapper'>
  <div class='content'>Some text</div>
</div>

Переход с небольшим количеством JS/jQuery без каких-либо дополнительных элементов:

Если вы добавите дополнительный элемент-обертку вокруг фактического элемента и поместите одно из преобразований в элемент-обертку, вы сможете добиться желаемого эффекта. Это также приведет к точному обратному эффекту при наведении (наведите тело и наведите курсор на приведенный ниже фрагмент).

$(document).ready(function() {
  var isHover; /* variable to track state */
  $('body').hover(function() {
    isHover = !isHover; /* invert the state */
    $('.content').css('transform', 'translate(0%, 300%)');
  }, function() {
    isHover = !isHover; /* invert the state */
    $('.content').css('transform', 'translate(0%, 300%)');
  });
  $('.content').on('transitionend', function() {
    if (isHover) {
      $('.content').css('transform', 'translate(0%, 300%) translate(15%, -136%)');
    } else {
      $('.content').css('transform', 'none');
    }
  });
});

.content {
  height: 100px;
  width: 100px;
  border: 1px solid;
  transition: all 1s;
}
body {
  min-height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='content'>Some text</div>

---

С анимацией и без лишних элементов:

Используя анимацию, это можно сделать, используя один элемент, но обратный эффект трудно достичь. Мы должны были бы написать дополнительный код для этого, и даже тогда это будет сложно.

.content {
  position: relative;
  height: 100px;
  width: 100px;
  border: 1px solid;
}
body:hover > .content {
  animation: move 1s forwards;
}
@keyframes move {
  0% {
    transform: none;
  }
  50% {
    transform: translate(0%, 300%);
  }
  100% {
    transform: translate(0%, 300%) translate(15%, -136%);
  }
}
body {
  min-height: 100vh;
}

<div class='content'>Some text</div>

Анимации с обратным эффектом:

Ниже приведен фрагмент, который производит обратный эффект также с использованием CSS-анимации. Но, как вы можете видеть, это немного сложно. Мы можем сделать это с помощью одной анимации, но она станет более сложной.

$(document).ready(function() {
  $('body').hover(function() {
    $('.content').css('transform', 'none');
    $('.content').removeClass('hover-out').addClass('hover-in');
  }, function() {
    $('.content').css('transform', 'translate(0%, 300%) translate(15%, -136%)'); /* as soon as an animation is removed, the element would snap back to original state, to avoid that we have to add final state via inline style */
    $('.content').removeClass('hover-in').addClass('hover-out');
  });
});

.content {
  height: 100px;
  width: 100px;
  border: 1px solid;
}
.hover-in {
  animation: hover-in 1s forwards;
}
.hover-out {
  animation: hover-out 1s forwards;
}
@keyframes hover-in {
  0% {
    transform: none;
  }
  50% {
    transform: translate(0%, 300%);
  }
  100% {
    transform: translate(0%, 300%) translate(15%, -136%);
  }
}
@keyframes hover-out {
  0% {
    transform: translate(0%, 300%) translate(15%, -136%);
  }
  50% {
    transform: translate(0%, 300%);
  }
  100% {
    transform: none;
  }
}
body {
  min-height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='content'>Some text</div>