CODEWITHSUNDEEP
csstransformcss-transforms
Strahinja Ajvaz
Strahinja Ajvaz

Reputation: 2643

transition functions and their order of operation

I'm trying to understand how the transform property works with order of operation and its relevance to the transform duration.

Say I have some html 

<div class="container">
  <ul>
    <li id="obj-1"><a href="#">Item 1</a></li>
    <li id="obj-2"><a href="#">Item 2</a></li>
  </ul>
</div>

The relevant css for container would be:

transition: all 6s ease 0s;

Now if I wanted to transform #obj-1, id write something like this:

#obj-1 {
    // some styling
}

#obj-1:hover {
    transform: scale(10) scale(2) scale(0.05); 
}

How would the browser interpret this css? My initial thought would be that it would allocate each "function" (3) an allocated amount of time (6s/3fun = 2 sec per fun). It doesn't work that way so I wanted to know if someone might point out what it is that determines how long each function would run or if they are somehow altered before execution.

Upvotes: 0

Views: 62

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

Your allocated amount of time for the animation actually depends on the transition-timing-function. Here you have given ease as a transition-timing-function. ease does not distribute time equally.

If you want your time equally distributed, you have to use transition-timing-function: linear for that.

See the example below you will see the difference.

More help on Transition CSS

.main div {
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 8px;
}

.main:hover div {
  transform: translateX(200px);
}

.one {
  transition: all 1s ease;
}

.two {
  transition: all 1s linear;
}

.three {
  transition: all 1s ease-in;
}
<div class="main">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

And your answer to transform: scale(10) scale(2) scale(0.05);

It will take the highest scale value i.e. 10, So your element will take the scale(10) as the transform.

Note: If any scale contain 0 then scale(0) will take effect

But other than scale() all transform values translate, rotate works differently.

translateX(100px) translateX(100px) translateX(100px) will result translateX(300px)

rotate(45deg) rotate(45deg) will result rotate(90deg)

See the example below

div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 0 auto 8px;
  transition: all 1s linear;
}

div.one:hover {
  transform: rotate(45deg) rotate(45deg);
}

div.two:hover {
  transform: translateX(100px) translateX(100px);
}

div.three:hover {
  transform: scale(2) scale(1);
}

div.four:hover {
  transform: scale(0) scale(2);
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

And if you want to run these transfomm values in order I prefer to use

@keyframes CSS

Upvotes: 1

Related Questions