CSS3 특수 효과 고양이가 줄에 매달려 좌우로 흔들리는 애니메이션

왼쪽 및 오른쪽으로 흔들리는 문자열에 매달려 있는 CSS3 특수 효과 고양이 애니메이션은 CSS3로 만든 애니메이션 스윙 효과입니다.

<머리>
<meta charset="utf-8">
<title>css3猫挂线球上左右摇摆动画特效</title>

<스타일>
.전체 포장 {
  -webkit-animation: bob 7s 큐빅-베지어(0.5, 0, 0.5, 1) 둘 다 무한;
          애니메이션: bob 7s 큐빅-베지어(0.5, 0, 0.5, 1) 둘 다 무한;
}

.모두 {
  상단: 10rem;
  왼쪽: 계산(50% - 2.5rem);
  위치: 절대;
  너비: 5rem;
  키: 5rem;
  -webkit-transform-origin: 센터 -20rem;
          변형-원점: 중심 -20rem;
  -webkit-animation: 7s 큐빅 베지어(0.5, 0, 0.5, 1) 스윙 모두 무한;
          애니메이션: 7s 입방 베지어(0.5, 0, 0.5, 1) 스윙 모두 무한;
}
.all:이전 {
  키: 20rem;
  너비: 2px;
  배경색: #DB242A;
  왼쪽: 계산(50% - 1px);
  하단: 20rem;
}

.얀 {
  위치: 절대;
  상단: 0;
  왼쪽: 0;
  너비: 80px;
  높이: 80px;
  테두리 반경: 50%;
  배경 이미지: -webkit-radial-gradient(왼쪽 상단, 원, #e97c7f, #db242a 50%, #af1d22);
  배경 이미지: 방사형 그라데이션(왼쪽 상단 원, #e97c7f, #db242a 50%, #af1d22);
  Z-색인: 1;
}
.yarn:이전, .yarn:이후 {
  위치: 절대;
  너비: 20px;
  높이: 20px;
  테두리 반경: 50%;
  배경색: 흰색;
  상단: -1px;
}
.yarn:이전 {
  왼쪽: 계산(50% + 7px);
  배경색: #b1bce6;
}
.yarn:이후 {
  오른쪽: calc(50% + 7px);
  배경색: #D5E8F8;
}

.cat-랩 {
  위치: 절대;
  상단: 0;
  왼쪽: 계산(50% - 45px);
  너비: 90px;
  높이: 130px;
  -webkit-animation: 리버스 스윙 7s 큐빅 베지어(0.5, 0, 0.5, 1) 둘 다 무한;
          애니메이션: 리버스 스윙 7s 입방 베지어(0.5, 0, 0.5, 1) 둘 다 무한;
  -webkit-transform-origin: 상단 중앙;
          변환-원점: 상단 중앙;
}

.cat {
  위치: 절대;
  상단: 0;
  왼쪽: 0;
  너비: 100%;
  높이: 100%;
  -webkit-animation: 7초 0.2초 모두 무한 스윙;
          애니메이션: 스윙 7초 0.2초 모두 무한;
  -webkit-transform-origin: 상단 중앙;
          변환-원점: 상단 중앙;
}

.cat-upper {
  위치: 절대;
  상단: 0;
  왼쪽: 0;
  너비: 100%;
  높이: 100%;
  -webkit-transform-origin: 상단 중앙;
          변환-원점: 상단 중앙;
  Z-색인: 1;
}
.cat-upper .cat-leg {
  위치: 절대;
  너비: 20px;
  높이: 100%;
  배경색: 흰색;
  Z-색인: -1;
  배경 이미지: -webkit-linear-gradient(왼쪽, #D5E8F8, #D5E8F8 20%, #8B9BD9);
  배경 이미지: 선형 그라데이션(오른쪽으로, #D5E8F8, #D5E8F8 20%, #8B9BD9);
}
.cat-upper .cat-leg:nth-child(1) {
  테두리 상단 왼쪽 반경: 100px;
  왼쪽: 10px;
}
.cat-upper .cat-leg:nth-child(1):이후 {
  왼쪽: 50%;
}
.cat-upper .cat-leg:nth-child(2) {
  테두리-왼쪽 상단 반경: 0;
  테두리 오른쪽 상단 반경: 100px;
  오른쪽: 10px;
}
.cat-upper .cat-leg:nth-child(2):이후 {
  오른쪽: 50%;
}

.cat-lower-wrap {
  높이: 90%;
  너비: 100%;
  위치: 절대;
  최고: 100%;
  너비: 75px;
  왼쪽: 계산(50% - 37.5px);
  -webkit-animation: 리버스 스윙 7초 0.2초 무한 모두;
          애니메이션: 리버스 스윙 7초 0.2초 무한 모두;
  -webkit-transform-origin: 상단 중앙;
          변환-원점: 상단 중앙;
}

.cat-lower {
  위치: 절대;
  상단: 0;
  왼쪽: 0;
  너비: 100%;
  높이: 100%;
  -webkit-animation: 7초 0.5초 모두 무한 스윙;
          애니메이션: 스윙 7초 0.5초 모두 무한;
  -webkit-transform-origin: 상단 중앙;
          변환-원점: 상단 중앙;
}
.cat-lower:이후 {
  위치: 절대;
  상단: 0;
  왼쪽: 0;
  너비: 100%;
  높이: 100%;
  테두리 반경: 100px;
  배경 이미지: -webkit-radial-gradient(10px 50px, 원, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
  배경 이미지: 방사형 그라데이션(10px 50px의 원, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
  Z-색인: 1;
}
.cat-lower .cat-leg, .cat-lower .cat-paw {
  Z-색인: -1;
  위치: 절대;
  높이: 20px;
  너비: 20px;
  -webkit-animation: Swing-leg 7s 0.3s 모두 무한;
          애니메이션: 스윙 레그 7초 0.3초 모두 무한;
  Z-색인: 1;
  -webkit-transform-origin: 상단 중앙;
          변환-원점: 상단 중앙;
  테두리 상단 왼쪽 반경: 20px;
  테두리 상단 오른쪽 반경: 20px;
  배경 이미지: -webkit-linear-gradient(왼쪽, 흰색, #D5E8F8, #8B9BD9);
  배경 이미지: 선형 그라데이션(오른쪽, 흰색, #D5E8F8, #8B9BD9);
}
.cat-lower > .고양이 다리 {
  하단: 20px;
}
.cat-lower > .cat-leg .cat-leg {
  최고: 25%;
}
.cat-lower > .cat-leg + .cat-leg {
  오른쪽: 0;
}
.cat-lower .cat-paw {
  최고: 50%;
  테두리 반경: 50%;
  배경색: #fff;
}
.cat-lower .cat-tail {
  위치: 절대;
  높이: 15px;
  너비: 10px;
  -webkit-animation: Swing-tail 7s 큐빅 베지어(0.5, 0, 0.5, 1) 둘 다 무한;
          애니메이션: 스윙 테일 7s 입방 베지어(0.5, 0, 0.5, 1) 둘 다 무한;
  -webkit-transform-origin: 상단 중앙;
          변환-원점: 상단 중앙;
  Z-색인: 0;
  배경 이미지: -webkit-linear-gradient(왼쪽, 흰색, #D5E8F8, #8B9BD9);
  배경 이미지: 선형 그라데이션(오른쪽, 흰색, #D5E8F8, #8B9BD9);
  테두리 하단 왼쪽 반경: 10px;
  테두리 하단 오른쪽 반경: 10px;
}
.cat-lower .cat-tail > .cat-tail {
  최고: 50%;
}
.cat-lower > .cat-tail {
  왼쪽: 계산(50% - 5px);
  최고: 95%;
}

.고양이 머리 {
  너비: 90px;
  높이: 90px;
  배경 이미지: -webkit-radial-gradient(10px 10px, 원, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
  배경 이미지: 방사형 그라데이션(10px 10px의 원, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
  테두리 반경: 50%;
  상단: 계산(100% - 45px);
}

.고양이 얼굴 {
  위치: 절대;
  상단: 0;
  왼쪽: 0;
  높이: 100%;
  너비: 100%;
  -webkit-animation: 면 7s 입방 베지어(0.5, 0, 0.5, 1) 모두 무한;
          애니메이션: 면 7s 입방 베지어(0.5, 0, 0.5, 1) 둘 다 무한;
  -webkit-transform-style: 보존-3d;
          변환 스타일: 보존-3D;
  -웹킷 관점: 100px;
          원근감: 100px;
}

.고양이귀 {
  위치: 절대;
  상단: 0;
  왼쪽: 0;
  높이: 50%;
  너비: 100%;
  Z-색인: -1;
}

.고양이귀 {
  너비: 20px;
  높이: 100%;
  위치: 절대;
  테두리 반경: 5px;
  상단: -10px;
}
.cat-ear:첫 번째 아이 {
  왼쪽: 0;
  -webkit-transform-origin: 왼쪽 위;
          변환 원본: 왼쪽 상단;
  -webkit-transform: SkewY(40deg);
          변환: SkewY(40deg);
  배경색: 흰색;
}
.cat-ear:첫 번째 자식:이전 {
  왼쪽: 0;
  테두리 오른쪽 위 반경: 50%;
  테두리 오른쪽 아래 반경: 50%;
  배경색: #D7EBFB;
}
.cat-ear:마지막 자식 {
  오른쪽: 0;
  -webkit-transform-origin: 오른쪽 상단;
          변환 원본: 오른쪽 상단;
  -webkit-transform: SkewY(-40deg);
          변환: 기울이기Y(-40deg);
  배경색: #d1e6f7;
}
.cat-ear:마지막 자식:이전 {
  오른쪽: 0;
  테두리-왼쪽 상단-반경: 50%;
  테두리 하단 왼쪽 반경: 50%;
  배경색: #e0f0fc;
}
.cat-ear:이전 {
  너비: 60%;
  높이: 100%;
  상단: 10px;
  위치: 절대;
  배경색: #fff;
}

.고양이 눈 {
  위치: 절대;
  최고: 50%;
  너비: 100%;
  높이: 6px;
  -webkit-animation: 7초 동안 깜박임 단계 끝 모두 무한;
          애니메이션: 7초 깜박임 단계 끝 무한 둘 다;
}
.cat-eyes:이전, .cat-eyes:이후 {
  위치: 절대;
  높이: 6px;
  너비: 6px;
  테두리 반경: 50%;
  배경색: #4B4D75;
}
.cat-eyes:이전 {
  왼쪽: 20px;
}
.cat-eyes:이후 {
  오른쪽: 20px;
}

.고양이 입 {
  위치: 절대;
  너비: 12px;
  높이: 8px;
  배경색: #4B4D75;
  최고: 60%;
  왼쪽: 계산(50% - 6px);
  테두리-왼쪽 상단-반경: 50% 30%;
  테두리 오른쪽 위 반경: 50% 30%;
  테두리-하단-왼쪽-반경: 50% 70%;
  테두리-오른쪽 아래-반경: 50% 70%;
  -webkit-transform: 번역Z(10px);
          변환: 번역Z(10px);
}
.cat-mouth:이전, .cat-mouth:이후 {
  위치: 절대;
  너비: 90%;
  높이: 100%;
  테두리: 2px 단색 #9FA2CB;
  최고: 80%;
  테두리 반경: 100px;
  테두리 상단 색상: 투명;
  Z-색인: -1;
}
.cat-mouth:이전 {
  테두리 왼쪽 색상: 투명;
  오른쪽: calc(50% - 1px);
  -webkit-transform-origin: 오른쪽 상단;
          변환-원점: 오른쪽 상단;
  -웹킷 변환: 회전(10도);
          변환: 회전(10도);
}
.cat-mouth:이후 {
  테두리 오른쪽 색상: 투명;
  왼쪽: 계산(50% - 1px);
  -webkit-transform-origin: 왼쪽 위;
          변환 원본: 왼쪽 상단;
  -webkit-transform: 회전(-10도);
          변환: 회전(-10deg);
}

.cat-whiskers {
  너비: 50%;
  높이: 8px;
  위치: 절대;
  하단: 25%;
  왼쪽: 25%;
  -webkit-transform-style: 보존-3d;
          변환 스타일: 보존-3D;
  -웹킷 관점: 60px;
          원근감: 60px;
}
.cat-whiskers:이전, .cat-whiskers:이후 {
  위치: 절대;
  높이: 100%;
  너비: 30%;
  테두리: 2px 단색 #9FA2CB;
  테두리 왼쪽: 없음;
  국경 오른쪽: 없음;
}
.cat-whiskers:이전 {
  오른쪽: 100%;
  -webkit-transform-origin: 오른쪽 중앙;
          변환-원점: 오른쪽 중앙;
  -webkit-transform: 회전Y(70deg) 회전Z(-10deg);
          변환: 회전Y(70도) 회전Z(-10도);
}
.cat-whiskers:이후 {
  왼쪽: 100%;
  -webkit-transform-origin: 왼쪽 중앙;
          변형-원점: 왼쪽 중앙;
  -webkit-transform: 회전Y(-70deg) 회전Z(10deg);
          변환: 회전Y(-70deg) 회전Z(10deg);
}

@-webkit-keyframes 밥 {
  0% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  6.25% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  12.5% ​​{
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  18.75% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  25% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  31.25% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  37.5% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  43.75% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  50% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  56.25% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  62.5% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  68.75% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  75% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  81.25% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  87.5% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  93.75% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  100% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
}

@keyframes 밥 {
  0% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  6.25% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  12.5% ​​{
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  18.75% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  25% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  31.25% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  37.5% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  43.75% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  50% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  56.25% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  62.5% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  68.75% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  75% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  81.25% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  87.5% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
  93.75% {
    -webkit-transform: 번역Y(-0.4rem);
            변환: 번역Y(-0.4rem);
  }
  100% {
    -webkit-transform: 번역Y(0.4rem);
            변환: 번역Y(0.4rem);
  }
}
@-webkit-keyframes 스윙 {
  0% {
    -웹킷 변환: 회전(5도);
            변환: 회전(5도);
  }
  12.5% ​​{
    -webkit-transform: 회전(-10도);
            변환: 회전(-10deg);
  }
  25% {
    -웹킷 변환: 회전(10도);
            변환: 회전(10도);
  }
  37.5% {
    -webkit-transform: 회전(-15도);
            변환: 회전(-15도);
  }
  50% {
    -웹킷 변환: 회전(23도);
            변환: 회전(23도);
  }
  62.5% {
    -webkit-transform: 회전(-23도);
            변환: 회전(-23도);
  }
  75% {
    -webkit-transform: 회전(15도);
            변환: 회전(15도);
  }
  87.5% {
    -webkit-transform: 회전(-10도);
            변환: 회전(-10deg);
  }
  100% {
    -웹킷 변환: 회전(5도);
            변환: 회전(5도);
  }
}
@keyframes 스윙 {
  0% {
    -웹킷 변환: 회전(5도);
            변환: 회전(5도);
  }
  12.5% ​​{
    -webkit-transform: 회전(-10도);
            변환: 회전(-10deg);
  }
  25% {
    -웹킷 변환: 회전(10도);
            변환: 회전(10도);
  }
  37.5% {
    -webkit-transform: 회전(-15도);
            변환: 회전(-15도);
  }
  50% {
    -웹킷 변환: 회전(23도);
            변환: 회전(23도);
  }
  62.5% {
    -webkit-transform: 회전(-23도);
            변환: 회전(-23도);
  }
  75% {
    -webkit-transform: 회전(15도);
            변환: 회전(15도);
  }
  87.5% {
    -webkit-transform: 회전(-10도);
            변환: 회전(-10deg);
  }
  100% {
    -웹킷 변환: 회전(5도);
            변환: 회전(5도);
  }
}
@-webkit-keyframes 스윙 레그 {
  0% {
    -webkit-transform: 회전(0.5deg);
            변환: 회전(0.5deg);
  }
  12.5% ​​{
    -webkit-transform: 회전(-1deg);
            변환: 회전(-1deg);
  }
  25% {
    -webkit-transform: 회전(1도);
            변환: 회전(1도);
  }
  37.5% {
    -webkit-transform: 회전(-1.5deg);
            변환: 회전(-1.5deg);
  }
  50% {
    -웹킷 변환: 회전(2.3도);
            변환: 회전(2.3도);
  }
  62.5% {
    -webkit-transform: 회전(-2.3deg);
            변환: 회전(-2.3deg);
  }
  75% {
    -webkit-transform: 회전(1.5도);
            변환: 회전(1.5deg);
  }
  87.5% {
    -webkit-transform: 회전(-1deg);
            변환: 회전(-1deg);
  }
  100% {
    -webkit-transform: 회전(0.5deg);
            변환: 회전(0.5deg);
  }
}
@keyframes 스윙 레그 {
  0% {
    -webkit-transform: 회전(0.5deg);
            변환: 회전(0.5deg);
  }
  12.5% ​​{
    -webkit-transform: 회전(-1deg);
            변환: 회전(-1deg);
  }
  25% {
    -webkit-transform: 회전(1도);
            변환: 회전(1도);
  }
  37.5% {
    -webkit-transform: 회전(-1.5deg);
            변환: 회전(-1.5deg);
  }
  50% {
    -웹킷 변환: 회전(2.3도);
            변환: 회전(2.3도);
  }
  62.5% {
    -webkit-transform: 회전(-2.3deg);
            변환: 회전(-2.3deg);
  }
  75% {
    -webkit-transform: 회전(1.5도);
            변환: 회전(1.5deg);
  }
  87.5% {
    -webkit-transform: 회전(-1deg);
            변환: 회전(-1deg);
  }
  100% {
    -webkit-transform: 회전(0.5deg);
            변환: 회전(0.5deg);
  }
}
@-webkit-keyframes 스윙 테일 {
  0% {
    -webkit-transform: 회전(-2deg);
            변환: 회전(-2deg);
  }
  12.5% ​​{
    -웹킷 변환: 회전(4도);
            변환: 회전(4도);
  }
  25% {
    -webkit-transform: 회전(-4deg);
            변환: 회전(-4deg);
  }
  37.5% {
    -웹킷 변환: 회전(6도);
            변환: 회전(6도);
  }
  50% {
    -webkit-transform: 회전(-9.2deg);
            변환: 회전(-9.2deg);
  }
  62.5% {
    -webkit-transform: 회전(9.2deg);
            변환: 회전(9.2deg);
  }
  75% {
    -webkit-transform: 회전(-6도);
            변환: 회전(-6도);
  }
  87.5% {
    -웹킷 변환: 회전(4도);
            변환: 회전(4도);
  }
  100% {
    -webkit-transform: 회전(-2deg);
            변환: 회전(-2deg);
  }
}
@keyframes 스윙테일 {
  0% {
    -webkit-transform: 회전(-2deg);
            변환: 회전(-2deg);
  }
  12.5% ​​{
    -웹킷 변환: 회전(4도);
            변환: 회전(4도);
  }
  25% {
    -webkit-transform: 회전(-4deg);
            변환: 회전(-4deg);
  }
  37.5% {
    -웹킷 변환: 회전(6도);
            변환: 회전(6도);
  }
  50% {
    -webkit-transform: 회전(-9.2deg);
            변환: 회전(-9.2deg);
  }
  62.5% {
    -webkit-transform: 회전(9.2deg);
            변환: 회전(9.2deg);
  }
  75% {
    -webkit-transform: 회전(-6도);
            변환: 회전(-6deg);
  }
  87.5% {
    -웹킷 변환: 회전(4도);
            변환: 회전(4도);
  }
  100% {
    -webkit-transform: 회전(-2deg);
            변환: 회전(-2deg);
  }
}
@-webkit-keyframes 역스윙 {
  0% {
    -webkit-transform: 회전(-5도);
            변환: 회전(-5도);
  }
  12.5% ​​{
    -웹킷 변환: 회전(10도);
            변환: 회전(10도);
  }
  25% {
    -webkit-transform: 회전(-10도);
            변환: 회전(-10deg);
  }
  37.5% {
    -webkit-transform: 회전(15도);
            변환: 회전(15도);
  }
  50% {
    -webkit-transform: 회전(-23도);
            변환: 회전(-23도);
  }
  62.5% {
    -웹킷 변환: 회전(23도);
            변환: 회전(23도);
  }
  75% {
    -webkit-transform: 회전(-15도);
            변환: 회전(-15도);
  }
  87.5% {
    -웹킷 변환: 회전(10도);
            변환: 회전(10도);
  }
  100% {
    -webkit-transform: 회전(-5도);
            변환: 회전(-5도);
  }
}
@keyframes 리버스 스윙 {
  0% {
    -webkit-transform: 회전(-5도);
            변환: 회전(-5도);
  }
  12.5% ​​{
    -웹킷 변환: 회전(10도);
            변환: 회전(10도);
  }
  25% {
    -webkit-transform: 회전(-10도);
            변환: 회전(-10deg);
  }
  37.5% {
    -webkit-transform: 회전(15도);
            변환: 회전(15도);
  }
  50% {
    -webkit-transform: 회전(-23도);
            변환: 회전(-23도);
  }
  62.5% {
    -웹킷 변환: 회전(23도);
            변환: 회전(23도);
  }
  75% {
    -webkit-transform: 회전(-15도);
            변환: 회전(-15도);
  }
  87.5% {
    -웹킷 변환: 회전(10도);
            변환: 회전(10도);
  }
  100% {
    -webkit-transform: 회전(-5도);
            변환: 회전(-5도);
  }
}
@-webkit-keyframes 얼굴 {
  0% {
    -webkit-transform: 번역X(-2.5px);
            변환: 번역X(-2.5px);
  }
  12.5% ​​{
    -webkit-transform: 번역X(5px);
            변환: 번역X(5px);
  }
  25% {
    -webkit-transform: 번역X(-5px);
            변환: 번역X(-5px);
  }
  37.5% {
    -webkit-transform: 번역X(7.5px);
            변환: 번역X(7.5px);
  }
  50% {
    -webkit-transform: 번역X(-11.5px);
            변환: 번역X(-11.5px);
  }
  62.5% {
    -webkit-transform: 번역X(11.5px);
            변환: 번역X(11.5px);
  }
  75% {
    -webkit-transform: 번역X(-7.5px);
            변환: 번역X(-7.5px);
  }
  87.5% {
    -webkit-transform: 번역X(5px);
            변환: 번역X(5px);
  }
  100% {
    -webkit-transform: 번역X(-2.5px);
            변환: 번역X(-2.5px);
  }
}
@keyframes 얼굴 {
  0% {
    -webkit-transform: 번역X(-2.5px);
            변환: 번역X(-2.5px);
  }
  12.5% ​​{
    -webkit-transform: 번역X(5px);
            변환: 번역X(5px);
  }
  25% {
    -webkit-transform: 번역X(-5px);
            변환: 번역X(-5px);
  }
  37.5% {
    -webkit-transform: 번역X(7.5px);
            변환: 번역X(7.5px);
  }
  50% {
    -webkit-transform: 번역X(-11.5px);
            변환: 번역X(-11.5px);
  }
  62.5% {
    -webkit-transform: 번역X(11.5px);
            변환: 번역X(11.5px);
  }
  75% {
    -webkit-transform: 번역X(-7.5px);
            변환: 번역X(-7.5px);
  }
  87.5% {
    -webkit-transform: 번역X(5px);
            변환: 번역X(5px);
  }
  100% {
    -webkit-transform: 번역X(-2.5px);
            변환: 번역X(-2.5px);
  }
}
@-webkit-keyframes 페이드 인 {
  {
에서     불투명도: 0;
  }
  {
에     불투명도: 1;
  }
}
@keyframes 페이드 인 {
  {
에서     불투명도: 0;
  }
  {
에     불투명도: 1;
  }
}
@-webkit-keyframes 깜박임 {
  에서, 까지, 10%, 25%, 80% {
    -webkit-transform: scaleY(1);
            변환: scaleY(1);
  }
  8%, 23%, 78% {
    -webkit-transform: scaleY(0.1);
            변환: scaleY(0.1);
  }
}
@keyframes 깜박임 {
  에서, 까지, 10%, 25%, 80% {
    -webkit-transform: scaleY(1);
            변환: scaleY(1);
  }
  8%, 23%, 78% {
    -webkit-transform: scaleY(0.1);
            변환: scaleY(0.1);
  }
}
본문, HTML {
  높이: 100%;
  너비: 100%;
  마진: 0;
  패딩: 0;
  배경색: #1F1F3C;
  오버플로: 숨김;
}

*, *:이전, *:이후 {
  상자 크기 조정: 테두리 상자;
  위치: 상대적;
  -webkit-animation-timing-function: 큐빅 베지어(0.5, 0, 0.5, 1);
          애니메이션 타이밍 기능: 입방 베지어(0.5, 0, 0.5, 1);
  -webkit-animation-fill-mode: 둘 다;
          애니메이션 채우기 모드: 둘 다;
}

*:이전, *:이후 {
  내용: '';
  디스플레이: 차단;
}