What is the default speed value in Bootstrap 4 animations?

Question

I want to scroll the screen to the element with ID main-title, for this I am using jQuery animation function with 1000 ms as below:

$("html, body").animate({scrollTop: $("#main-title").scrollTop()}, 1000);

However this does not seem the same value as the other animations that Bootstrap makes in its components. I would like to use the same default value that Bootstrap 4 uses to make your animations in general.

There is a Bootstrap default value for the function animate? If it exists, what is this value?

Answer 1

As per bootstrap SCSS source https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss it seems that are these:

$transition-base:             all .2s ease-in-out !default;
$transition-fade:             opacity .15s linear !default;
$transition-collapse:         height .35s ease !default;

Standard transition $transition-base that serves for those elements that have different changes in CSS is 200ms (0.2s).

Transition from changing opacity (transparency) $transition-fade which serves for those elements which are hidden or displayed is 150ms (0.15s).

Height shift transition (to hide menus) $transition-collapse is 350ms (0.35s).

But it is worth noting that the effect of $transition-base is in ease-in-out and the $transition-collapse is in ease, the only linear is the $transition-base, all basic animations in jQuery are linear, unless you use jQueryUI, which allows you to use variations.

---

Example of variation of effects:

.exemplo {
    position: relative;
    border: 1px #ccc solid;
    height: 35px;
    width: 500px;
    margin-bottom: 5px;
}

.exemplo .teste {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 25px;
    height: 25px;
    background: #f00;
}

.linear {
    animation: EaseAnimate 1.5s linear 0s infinite alternate;
}
.ease {
    animation: EaseAnimate 1.5s ease 0s infinite alternate;
}
.ease-in-out {
    animation: EaseAnimate 1.5s ease-in-out 0s infinite alternate;
}

@keyframes EaseAnimate
{
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(465px);
  }
}
    

<p>Linear:</p>
<div class="exemplo">
    <div class="teste linear"></div>
</div>

<p>Ease:</p>
<div class="exemplo">
    <div class="teste ease"></div>
</div>

<p>Ease-in-out:</p>
<div class="exemplo">
    <div class="teste ease-in-out"></div>
</div>