Как анимировать движение колонки в Bootstrap Grid?

Question

Я делаю динамическую форму.Вы можете переключаться и добавлять больше форм в соответствии с вашими потребностями.Когда вы переключаете форму, она появляется / исчезает мгновенно.Я хочу движущуюся анимацию.Когда появляется новая форма, чтобы подтолкнуть других, и когда она исчезнет, ​​все они переместятся на свое место.

Вот изображение моей сетки: https://imgur.com/a/pSZr0eQ

Вы можете увидеть 4 карты.Это то, что я пытаюсь анимировать.

Я пытался использовать свойство CSS-перехода, однако оно по-прежнему выглядит так же, как и раньше.

.move-anim {
   -webkit-transition: all 0.5s ease !important;
   -moz-transition: all 0.5s ease !important;
   -o-transition: all 0.5s ease !important;
   transition: all 0.5s ease !important;
}

Классы, которые у меня естьиспользуется на div: row, col-md-6

Answer 1

.blue {
  background: blue;
  padding: 15px
}

.orange {
  background: orange;
  padding: 15px
}

.red {
  background: red;
  padding: 15px
}

<link href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="col-md-12 blue animated 	fadeInUp">
        <h1>Test1</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet, commodi?</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="col-md-12 orange animated 	fadeInUp">
        <h1>Test2</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet, commodi?</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="col-md-12 red animated 	fadeInUp">
        <h1>Test3</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet, commodi?</p>
      </div>
    </div>
  </div>
</div>

Здесь Я сделал для вас пример.

Примечание: я использовал animate.css, не забудьтевключите его (с здесь ).