컬러 슬라이드 알림 스킨

/* 연결 상태 표시 비활성화 */
div#Connecting {
  display: none
}

/* 이미지 표시 비활성화 */
#image-wrap {
  display: none !important
}

html,
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%
}

body {
  text-align: center;
  font-size: 2em !important
}

h1 {
  font-size: 1em !important
}

#alertbox {
  display: flex;
  position: relative
}

#wrap {
  justify-content: center;
  align-items: center
}

#text-wrap {
  width: calc(100vw - 6rem)
}

.layout-above #alertbox #text-wrap #alert-text {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #bac8ff;
  animation: fadeWidthIn 1s ease 0s alternate forwards running !important;
  z-index: 3
}

.layout-above #alertbox #text-wrap #alert-text:before,
.layout-above #alertbox #text-wrap #alert-text:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  box-sizing: border-box;
  top: 0;
  left: 0
}

.layout-above #alertbox #text-wrap #alert-text:before {
  background-color: #fff;
  animation: fadeWidthIn 1s ease 250ms alternate forwards running !important;
  z-index: -1
}

.layout-above #alertbox #text-wrap #alert-text:after {
  background-color: #ffa8a8;
  animation: fadeWidthIn 1s ease 125ms alternate forwards running !important;
  z-index: -2
}

.fadeIn {
  animation: none !important
}

h1,
#comment {
  width: calc(100vw - 40px - 6.5rem)
}

#ytaria {
  display: none
}

h1,
h2,
#nickname,
#amount,
#comment {
  text-shadow: 0 0 0 rgba(0,0,0,0) !important
}

@keyframes fadeWidthIn {
  0% {
    width: 0%
  }
  to {
    width: 100%
  }
}

오랜만에 새로 만들어 본 트윕 알림 스킨 입니다!

파란색, 빨간색, 하얀색 배경이 순서대로 슬라이드 하면서 표시해 주는 알림 스킨을 제작했습니다. 잘 쓰시기 바랍니다!