How to solve the problem with animation jerks?

Question

css

When you click on the first element of the collapse (disconnecting fittings), from the beginning, reduced pictures appear for a second, then normal ones, and the height changes in a jerk, the
site has already broken the whole voice

<a data-toggle="collapse" href="#multiCollapseExample10" role="button" aria-expanded="false" aria-controls="multiCollapseExample10"><img src="{THEME}/images/otkl_arm.png" alt="Отключающая арматура"  /></a>							
<div class="collapse multi-collapse animated  zoomIn" id="multiCollapseExample10">
  <div class="card card-body ">
    <a href="#"><img src="/files/product/klapan-otsekatel_k302.png" /></a>
    <a href="#"><img src="/files/product/klapan-otsekatel_k302_c_dve_zaxlopki.png" /></a>
  </div>
</div>

Answer 1

.collapse.in {
    display: block;
}

This style causes a jerk. The matter is that in the beginning elements are hidden, have zero height. When you click on the trigger, the animation starts, and after about half a second .multi-collapse..., the .collapse.in.
You can start by laying out this group of elements normally so that there are no non-block links and pictures that float one by one inside one container. And there, you see, the solution will come by itself: for example, do not use the built-in functions for the appearance of elements from the bootstrap and apply the appearance effect to the correct nodes.

Answer 2

Try tweaking jquery..