CODEWITHSUNDEEP
jqueryhtmlcsscss-transitions
Martin
Martin

Reputation: 367

How to increase css transition speed on the fly

I have a css transition and I need to make it faster at certain moment. But the usual behaviour to add a class doesn't work. My question is why it doesn't, and how it could be implemented.

HTML:

<a href="#" onclick="$('div').addClass('move')">move</a> |
<a href="#" onclick="$('div').addClass('faster')">faster</a>
<div></div>

CSS:

div {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: all 10s;
}

.move {
  margin-left: 500px;
}

.faster {
  transition: all 1s !important;
}

Codepen: https://codepen.io/anon/pen/EQxaxX

Upvotes: 5

Views: 3079

Answers (1)

Temani Afif
Temani Afif

Reputation: 272648

Here is a similar question where we had to deal with a similar case but it was about slowing an animation How to slow down CSS animation on hovering element without jumps?

The idea is to rely on the movement of the container to create this acceleration. So to make your animation fast move the container in the same direction BUT don't forget to consider that moving the container will also move the final destination of your initial element, so you need to change it also.

Here is an example:

$('.start').click(function() {
  $('.element').addClass('move');
})


$('.fast').click(function() {
  $('.container').addClass('faster');
})
.container {
  transition: all 5s linear;
}

.element {
  margin-top: 10px;
  width: 100px;
  height: 100px;
  background-color: green;
  transition: all 10s linear;
}

.move {
  margin-left: 500px;
}

.faster {
  margin-left: 300px;
}

.faster .move {
  margin-left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="start">move</a> | <a href="#" class="fast">faster</a>
<div class="container">
  <div class="element"> </div>
</div>
<div class="element"> </div>

This soluion seems simple as it only rely on some CSS but it has some drawbacks. As you may notice at the end, the transition become slow and this is due to the fact that the animation of the container ended and thus the speed of the element got back to its initial value. This behavior will be different depending on the moment of the click.

So you may adjust the values to make this effect negligible or you can consider more complex jQuery code to increase the speed.

Here is an example:

$('.start').click(function() {
  $('.element').addClass('move');
})


$('.fast').click(function() {
  $('.element').css('margin-left','10000px'); // we make a big value to increase speed
  setTimeout(function(){check_limit()},20);
  
})

// we test the limit and we avoid margin to go to the big value
function check_limit() {
   if(parseInt($('.element').css('margin-left')) >=500) {
      $('.element').css('margin-left','500px');
   } else {
      setTimeout(function(){check_limit()},20);
   }
}
.container {
  transition: all 5s linear;
}

.element {
  margin-top:10px;
  width: 100px;
  height: 100px;
  background-color: green;
  transition: all 10s linear;
}

.move {
  margin-left: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="start">move</a> | <a href="#" class="fast">faster</a>
<div class="element"> </div>

Upvotes: 1

Related Questions