CODEWITHSUNDEEP
htmlcsscss-transitionscss-animationscss-transforms
Luca Reghellin
Luca Reghellin

Reputation: 8101

How to make 2 chained transforms, the first with transition and the following with no transotions?

I need to add 2 chained transforms, one animated and the second with no animations. Something like:

transition: transform 500ms;
transform: translateX(100%);

and then, after 500ms:

transform: translateX(200%); // this time without any transition or, in other words, with transition time == 0ms.

So the object will translate the first 100% width on the X axis with an animation, and than directly go further to 200% without animating, just plain set.

How to?

Upvotes: 0

Views: 26

Answers (1)

Temani Afif
Temani Afif

Reputation: 272590

You can use animation like below:

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 1s forwards;
}

@keyframes change {
  50% {
    transform: translateX(100%);
  }
  50.1%, 100% { /*change right after 50%*/
    transform: translateX(200%);
  }
}
<div class="box"></div>

With transition you can consider 2 divs:

.container {
  display:inline-block;
  transition:0s 0.5s transform;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition:0.5s transform;
}

body:hover .container,
body:hover .box{
  transform: translateX(100%);
}
<div class="container">
<div class="box"></div>
</div>

Upvotes: 2

Related Questions