добавление анимации в коллапс при загрузке

Question

Наша команда разрабатывает несколько карт, которые используют коллапс Bootstrap для переключения открытия / закрытия div, который раскрывает больше информации.Коллапс работает отлично, но мы хотели добавить еще несколько переходов, чтобы он выглядел еще более гладким.Наш HTML / CSS выглядит следующим образом:

<div class="cards" data-toggle="collapse" href="#moreInfo" role="button" aria-expanded="false" aria-controls="collapseDiv" ng-click="expandDiv()">
  <span class="{{c.options.icon}} icon"></span>
  <hr class="divider"/>
  <h2 class="title">{{c.options.title}}</h2>
  <div class="info" class="collapse" id="moreInfo">
    <hr class="divider"/>
    <div ng-repeat="row in c.data.rows track by row.sys_id">
      <h3 ng-if="c.data.header_field">{{c.data.header_field}}</h3>
      <h5 ng-if="c.data.subheader_field">{{c.data.subheader_field}}</h5>
      <p ng-repeat="f in c.cardFields">
        <b>{{row[f].label}}:</b> {{row[f].display_value}}
      </p>       
    </div>
  </div>
</div> 

.divider {
  border-bottom: 1px solid $color-accent;
  margin-left: 0;
  margin-right: 0;
}
.cards {
  display: flex;
  flex-direction: column;
  background: $color-lightest;
  border-radius: 3px;
  padding: 1.5em;
}
.cards .icon {
  color: $color-accent;
  font-size: 4em;
  text-align: center;
  padding: 0em;
  position: relative;
  top: 0em;
  transition: font-size .3s ease;
}

.cards .collapsed .icon {
    font-size: 2em;
  transition: font-size .3s;
}

.cards .title {
  color: $color-darkest;
  text-align: center;
  font-weight: 300;
}

Приведенный выше код создает следующую карту:

Вот что этовыглядит как при открытом открытии:

Есть ли способ добавить переход, при котором пользовательский глифик сокращается после открытия карты?В нашем коде мы попытались добавить .cards .collapsed.значок, чтобы уменьшить размер шрифта, но это не работает.Есть предложения?