avatars animation

avatars.sass

$transition-bounce: cubic-bezier(0.405, 1.510, 1.000, 0.915)

.messages-list
  +translate3d(0,0,0)

.message-box-user-avatar
  display: inline-block
  position: relative
  padding-right: 10px
  &, &:focus, &:hover
    text-decoration: none
  .conference-message-box &
    .message-box-user-avatar-image + .message-box-user-avatar-image
      margin:
        top: - $user-avatar-width-md
        bottom: 4px
      border: 1px solid rgba(#fff, 0.5)
      box-shadow: 0 1px 4px rgba(#000, 0.2)
      transition: opacity 0.2s $transition-bounce, margin 0.2s $transition-bounce
      transition-delay: 0.3s
    &:hover
      .message-box-user-avatar-image + .message-box-user-avatar-image
        margin-top: - $user-avatar-width-md/2
        transition-delay: 0
      .message-box-user-avatar-more
        opacity: 1