Egyptian Egyptian - 6 months ago 7
CSS Question

How can I add two transition transforms but one after one?

I want to add 2 transition transforms

But I want to start the second transform after the end of the first transform

the element should go to a point slowly and after that it should go to another point

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

Answer

You cannot do this with just a single element using transition because when you put more than one translate within the transform, the transform property on the whole is transitioned and not one by one.

With transition using an extra wrapper element:

If you add an extra wrapper element around the actual element and put one of the transforms on the wrapper element you could achieve the effect that you are looking for. It would also produce the exact reverse effect on the hover out (hover the body and hover out in the below snippet).

.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>


With animation and no extra element:

Using animations this can be done using a single element but the reverse effect is tough to achieve. We would have to write extra code for this and even then it will be complex.

.wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  border: 1px solid;
}
body:hover > .wrapper {
  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='wrapper'>
  <div class='content'>Some text</div>
</div>

Comments