scinote-web/app/javascript/src/styles/animations.scss

.alert-animated-enter {
  opacity: .01;

  &.alert-animated-enter-active {
    opacity: 1;
    transition: opacity 150ms ease-in;
  }
}

.alert-animated-exit {
  opacity: 1;
  padding-bottom: 15px;
  padding-top: 15px;
  margin-bottom: 20px;
  height: 50px;

  &.alert-animated-exit-active {
    overflow: hidden;
    opacity: .01;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    height: 0;
    transition: opacity 300ms ease-in,
                padding-top 500ms ease-in,
                padding-bottom 500ms ease-in,
                margin-bottom 500ms ease-in,
                height 500ms ease-in;
  }
}