为启动崩溃添加动画

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;
}

上面的代码创建以下卡：

这是打开后的样子：

是否有一种添加过渡的方式，一旦卡片被打开，用户glyphicon就会缩小？在我们的代码中，我们尝试添加.cards .collapsed。图标缩小字体大小，但这不起作用。有什么建议吗？