.eye-notice-wrapper {
  width: 385px;
  position: fixed;
  top: 20px;
  right: 0;
  margin-right: 20px;
}
.eye-notice {
  position: relative;
  width: 384px;
  padding: 14px 26px 14px 13px;
  margin-bottom: 18px;
  border-radius: 3px;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  transition: all 100ms ease-in-out;
  overflow: hidden;
}
.eye-notice-content {
  width: 100%;
}
.eye-notice-close {
  width: 15px;
  height: 15px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}
.notice-enter {
  transform: translateX(110%);
}
.notice-enter-active {
  transform: translateX(0);
  transition: all 150ms ease-in-out;
}
.notice-exit-active {
  animation-name: NotificationFadeOut;
  transition: all 100ms ease-in;
  animation-duration: .24s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.645,.045,.355,1)
}

@keyframes NotificationFadeOut {
  0% {
      opacity: 1;
      margin-bottom: 16px;
      padding-top: 16px 24px;
      padding-bottom: 16px 24px;
      max-height: 150px
  }

  to {
      opacity: 0;
      margin-bottom: 0;
      padding-top: 0;
      padding-bottom: 0;
      max-height: 0
  }
}