CSS3-Spezialeffektkatze, die an der Schnur hängt und eine Animation nach links und rechts schwingt

Die CSS3-Spezialeffektkatze, die an der Schnur hängt und nach links und rechts schwingt, ist ein animierter Schwingeffekt, der mit CSS3 erstellt wurde

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

<Stil>
.all-wrap {
  -webkit-animation: bob 7s kubisch-bezier(0,5, 0, 0,5, 1) unendlich beide;
          Animation: Bob 7s Kubikbezier(0,5, 0, 0,5, 1) unendlich beide;
}

.alle {
  oben: 10rem;
  links: calc(50% - 2,5rem);
  Position: absolut;
  Breite: 5rem;
  Höhe: 5rem;
  -webkit-transform-origin: center -20rem;
          transform-origin: center -20rem;
  -webkit-animation: Swing 7s Kubikbezier(0,5, 0, 0,5, 1) unendlich beide;
          Animation: Swing 7s Kubikbezier(0,5, 0, 0,5, 1) unendlich beide;
}
.all:vor {
  Höhe: 20rem;
  Breite: 2px;
  Hintergrundfarbe: #DB242A;
  links: calc(50% - 1px);
  unten: 20rem;
}

.Garn {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 80px;
  Höhe: 80px;
  Randradius: 50 %;
  Hintergrundbild: -webkit-radial-gradient(oben links, Kreis, #e97c7f, #db242a 50%, #af1d22);
  Hintergrundbild: radial-gradient(Kreis oben links, #e97c7f, #db242a 50%, #af1d22);
  Z-Index: 1;
}
.yarn:before, .yarn:after {
  Position: absolut;
  Breite: 20px;
  Höhe: 20px;
  Randradius: 50 %;
  Hintergrundfarbe: weiß;
  oben: -1px;
}
.yarn:before {
  links: calc(50% 7px);
  Hintergrundfarbe: #b1bce6;
}
.yarn:after {
  rechts: calc(50% 7px);
  Hintergrundfarbe: #D5E8F8;
}

.cat-wrap {
  Position: absolut;
  oben: 0;
  links: calc(50% - 45px);
  Breite: 90px;
  Höhe: 130px;
  -webkit-animation: Reverse-Swing 7s Kubikbezier(0,5, 0, 0,5, 1) unendlich beide;
          Animation: Reverse-Swing 7s Kubikbezier(0,5, 0, 0,5, 1) unendlich beide;
  -webkit-transform-origin: oben in der Mitte;
          transform-origin: oben in der Mitte;
}

.cat {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100 %;
  -webkit-animation: 7s 0,2s schwingen, beides unendlich;
          Animation: Swing 7s 0,2s unendlich beide;
  -webkit-transform-origin: oben in der Mitte;
          transform-origin: oben in der Mitte;
}

.cat-upper {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100 %;
  -webkit-transform-origin: oben in der Mitte;
          transform-origin: oben in der Mitte;
  Z-Index: 1;
}
.cat-upper .cat-leg {
  Position: absolut;
  Breite: 20px;
  Höhe: 100 %;
  Hintergrundfarbe: weiß;
  Z-Index: -1;
  Hintergrundbild: -webkit-linear-gradient(left, #D5E8F8, #D5E8F8 20%, #8B9BD9);
  Hintergrundbild: linearer Farbverlauf (nach rechts, #D5E8F8, #D5E8F8 20 %, #8B9BD9);
}
.cat-upper .cat-leg:nth-child(1) {
  Rand-oben-links-Radius: 100px;
  links: 10px;
}
.cat-upper .cat-leg:nth-child(1):after {
  übrig: 50 %;
}
.cat-upper .cat-leg:nth-child(2) {
  Rand-oben-links-Radius: 0;
  Rand-oben-rechts-Radius: 100px;
  rechts: 10px;
}
.cat-upper .cat-leg:nth-child(2):after {
  richtig: 50 %;
}

.cat-lower-wrap {
  Höhe: 90 %;
  Breite: 100 %;
  Position: absolut;
  oben: 100 %;
  Breite: 75px;
  links: calc(50% - 37,5px);
  -webkit-animation: Rückwärtsschwingen 7s 0,2s unendlich beides;
          Animation: Rückwärtsschwenken 7s 0,2s unendlich beides;
  -webkit-transform-origin: oben in der Mitte;
          transform-origin: oben in der Mitte;
}

.cat-lower {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100 %;
  -webkit-animation: 7s 0,5s unendlich schwingen, beides;
          Animation: 7s 0,5s schwingen, beides unendlich;
  -webkit-transform-origin: oben in der Mitte;
          transform-origin: oben in der Mitte;
}
.cat-lower:after {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100 %;
  Randradius: 100px;
  Hintergrundbild: -webkit-radial-gradient(10px 50px, Kreis, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
  Hintergrundbild: radialer Farbverlauf (Kreis bei 10 Pixel 50 Pixel, #ffffff, #ffffff 40 %, #d5e8f8 65 %, #8b9bd9);
  Z-Index: 1;
}
.cat-lower .cat-leg, .cat-lower .cat-paw {
  Z-Index: -1;
  Position: absolut;
  Höhe: 20px;
  Breite: 20px;
  -webkit-animation: Swing-Leg 7s 0,3s unendlich beides;
          Animation: Swing-Bein 7s 0,3s unendlich beides;
  Z-Index: 1;
  -webkit-transform-origin: oben in der Mitte;
          transform-origin: oben in der Mitte;
  Rand-oben-links-Radius: 20px;
  Rand-oben-rechts-Radius: 20px;
  Hintergrundbild: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9);
  Hintergrundbild: linearer Farbverlauf (nach rechts, weiß, #D5E8F8, #8B9BD9);
}
.cat-lower > .cat-leg {
  unten: 20px;
}
.cat-lower > .cat-leg .cat-leg {
  oben: 25 %;
}
.cat-lower > .cat-leg .cat-leg {
  rechts: 0;
}
.cat-lower .cat-paw {
  oben: 50 %;
  Randradius: 50 %;
  Hintergrundfarbe: #fff;
}
.cat-lower .cat-tail {
  Position: absolut;
  Höhe: 15px;
  Breite: 10px;
  -webkit-animation: Swing-Tail 7s Kubikbezier(0,5, 0, 0,5, 1) unendlich beide;
          Animation: Swing-Tail 7s Kubikbezier(0,5, 0, 0,5, 1) unendlich beide;
  -webkit-transform-origin: oben in der Mitte;
          transform-origin: oben in der Mitte;
  Z-Index: 0;
  Hintergrundbild: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9);
  Hintergrundbild: linearer Farbverlauf (nach rechts, weiß, #D5E8F8, #8B9BD9);
  Rand-unten-links-Radius: 10px;
  Rand-unten-rechts-Radius: 10px;
}
.cat-lower .cat-tail > .cat-tail {
  oben: 50 %;
}
.cat-lower > .cat-tail {
  links: calc(50% - 5px);
  oben: 95 %;
}

.cat-head {
  Breite: 90px;
  Höhe: 90px;
  Hintergrundbild: -webkit-radial-gradient(10px 10px, Kreis, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
  Hintergrundbild: radialer Farbverlauf (Kreis bei 10 Pixel, 10 Pixel, #ffffff, #ffffff 40 %, #d5e8f8 65 %, #8b9bd9);
  Randradius: 50 %;
  oben: calc(100% - 45px);
}

.cat-face {
  Position: absolut;
  oben: 0;
  links: 0;
  Höhe: 100 %;
  Breite: 100 %;
  -webkit-animation: Gesicht 7s kubisch-bezier(0,5, 0, 0,5, 1) unendlich beide;
          Animation: Gesicht 7s kubisch-bezier(0,5, 0, 0,5, 1) unendlich beide;
  -webkit-transform-style: Preserve-3d;
          Transformationsstil: Preserve-3d;
  -webkit-perspektive: 100px;
          Perspektive: 100px;
}

.Katzenohren {
  Position: absolut;
  oben: 0;
  links: 0;
  Höhe: 50 %;
  Breite: 100 %;
  Z-Index: -1;
}

.cat-ear {
  Breite: 20px;
  Höhe: 100 %;
  Position: absolut;
  Randradius: 5px;
  oben: -10px;
}
.cat-ear:first-child {
  links: 0;
  -webkit-transform-origin: oben links;
          transform-origin: oben links;
  -webkit-transform: skewY(40deg);
          transformieren: skewY(40deg);
  Hintergrundfarbe: weiß;
}
.cat-ear:first-child:before {
  links: 0;
  Rand-oben-rechts-Radius: 50 %;
  Rand-unten-rechts-Radius: 50 %;
  Hintergrundfarbe: #D7EBFB;
}
.cat-ear:last-child {
  rechts: 0;
  -webkit-transform-origin: oben rechts;
          transform-origin: oben rechts;
  -webkit-transform: skewY(-40deg);
          transformieren: skewY(-40deg);
  Hintergrundfarbe: #d1e6f7;
}
.cat-ear:last-child:before {
  rechts: 0;
  Rand-oben-links-Radius: 50 %;
  Rand-unten-links-Radius: 50 %;
  Hintergrundfarbe: #e0f0fc;
}
.cat-ear:before {
  Breite: 60 %;
  Höhe: 100 %;
  oben: 10px;
  Position: absolut;
  Hintergrundfarbe: #fff;
}

.Katzenaugen {
  Position: absolut;
  oben: 50 %;
  Breite: 100 %;
  Höhe: 6px;
  -webkit-animation: blinken 7s Schritt-Ende unendlich beide;
          Animation: 7s blinken, Schritt-Ende, beide unendlich;
}
.cat-eyes:before, .cat-eyes:after {
  Position: absolut;
  Höhe: 6px;
  Breite: 6px;
  Randradius: 50 %;
  Hintergrundfarbe: #4B4D75;
}
.cat-eyes:before {
  links: 20px;
}
.cat-eyes:after {
  rechts: 20px;
}

.cat-mouth {
  Position: absolut;
  Breite: 12px;
  Höhe: 8px;
  Hintergrundfarbe: #4B4D75;
  oben: 60 %;
  links: calc(50% - 6px);
  Rand-oben-links-Radius: 50 % 30 %;
  Rand-oben-rechts-Radius: 50 % 30 %;
  Rand-unten-links-Radius: 50 % 70 %;
  Rand-unten-rechts-Radius: 50 % 70 %;
  -webkit-transform: TranslateZ(10px);
          transform: TranslateZ(10px);
}
.cat-mouth:before, .cat-mouth:after {
  Position: absolut;
  Breite: 90 %;
  Höhe: 100 %;
  Rand: 2px einfarbig #9FA2CB;
  oben: 80 %;
  Randradius: 100px;
  Rand-Top-Farbe: transparent;
  Z-Index: -1;
}
.cat-mouth:before {
  Rand-Links-Farbe: transparent;
  rechts: calc(50% - 1px);
  -webkit-transform-origin: oben rechts;
          transform-origin: oben rechts;
  -webkit-transform: rotieren (10 Grad);
          transformieren: drehen(10 Grad);
}
.cat-mouth:after {
  border-right-color: transparent;
  links: calc(50% - 1px);
  -webkit-transform-origin: oben links;
          transform-origin: oben links;
  -webkit-transform: rotieren (-10 Grad);
          transformieren: drehen(-10 Grad);
}

.cat-whiskers {
  Breite: 50 %;
  Höhe: 8px;
  Position: absolut;
  unten: 25 %;
  übrig: 25 %;
  -webkit-transform-style: Preserve-3d;
          Transformationsstil: Preserve-3d;
  -webkit-perspektive: 60px;
          Perspektive: 60px;
}
.cat-whiskers:before, .cat-whiskers:after {
  Position: absolut;
  Höhe: 100 %;
  Breite: 30 %;
  Rand: 2px einfarbig #9FA2CB;
  border-left: keine;
  border-right: keine;
}
.cat-whiskers:before {
  richtig: 100 %;
  -webkit-transform-origin: rechte Mitte;
          transform-origin: rechte Mitte;
  -webkit-transform: rotierenY(70 Grad) rotierenZ(-10 Grad);
          transformieren: rotierenY(70 Grad) rotierenZ(-10 Grad);
}
.cat-whiskers:after {
  links: 100 %;
  -webkit-transform-origin: linke Mitte;
          transform-origin: linke Mitte;
  -webkit-transform: rotierenY(-70 Grad) rotierenZ(10 Grad);
          transformieren: rotierenY(-70 Grad) rotierenZ(10 Grad);
}

@-webkit-keyframes bob {
  0 % {
    -webkit-transform: TranslateY(0.4rem);
            transformieren: translatorY(0.4rem);
  }
  6,25 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  12,5 % {
    -webkit-transform: TranslateY(0.4rem);
            transformieren: translatorY(0.4rem);
  }
  18,75 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  25 % {
    -webkit-transform: TranslateY(0.4rem);
            transformieren: translatorY(0.4rem);
  }
  31,25 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  37,5 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  43,75 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  50 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  56,25 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  62,5 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  68,75 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  75 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  81,25 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  87,5 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  93,75 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  100 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
}

@keyframes bob {
  0 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  6,25 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  12,5 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  18,75 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  25 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  31,25 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  37,5 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  43,75 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  50 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  56,25 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  62,5 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  68,75 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  75 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  81,25 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  87,5 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
  93,75 % {
    -webkit-transform: TranslateY(-0.4rem);
            transform: translatorY(-0.4rem);
  }
  100 % {
    -webkit-transform: TranslateY(0.4rem);
            transform: translatorY(0.4rem);
  }
}
@-webkit-keyframes schwingen {
  0 % {
    -webkit-transform: rotieren (5 Grad);
            transformieren: drehen (5 Grad);
  }
  12,5 % {
    -webkit-transform: rotieren (-10 Grad);
            transformieren: drehen(-10 Grad);
  }
  25 % {
    -webkit-transform: rotieren (10 Grad);
            transformieren: drehen(10 Grad);
  }
  37,5 % {
    -webkit-transform: rotieren (-15 Grad);
            transformieren: drehen (-15 Grad);
  }
  50 % {
    -webkit-transform: rotieren (23 Grad);
            transformieren: drehen (23 Grad);
  }
  62,5 % {
    -webkit-transform: rotieren (-23 Grad);
            transformieren: drehen(-23 Grad);
  }
  75 % {
    -webkit-transform: rotieren (15 Grad);
            transformieren: drehen (15 Grad);
  }
  87,5 % {
    -webkit-transform: rotieren (-10 Grad);
            transformieren: drehen(-10 Grad);
  }
  100 % {
    -webkit-transform: rotieren (5 Grad);
            transformieren: drehen (5 Grad);
  }
}
@keyframes schwingen {
  0 % {
    -webkit-transform: rotieren (5 Grad);
            transformieren: drehen (5 Grad);
  }
  12,5 % {
    -webkit-transform: rotieren (-10 Grad);
            transformieren: drehen(-10 Grad);
  }
  25 % {
    -webkit-transform: rotieren (10 Grad);
            transformieren: drehen(10 Grad);
  }
  37,5 % {
    -webkit-transform: rotieren (-15 Grad);
            transformieren: drehen (-15 Grad);
  }
  50 % {
    -webkit-transform: rotieren (23 Grad);
            transformieren: rotieren (23 Grad);
  }
  62,5 % {
    -webkit-transform: rotieren (-23 Grad);
            transformieren: drehen(-23 Grad);
  }
  75 % {
    -webkit-transform: rotieren (15 Grad);
            transformieren: drehen (15 Grad);
  }
  87,5 % {
    -webkit-transform: rotieren (-10 Grad);
            transformieren: drehen(-10 Grad);
  }
  100 % {
    -webkit-transform: rotieren (5 Grad);
            transformieren: drehen (5 Grad);
  }
}
@-webkit-keyframes Swing-Leg {
  0 % {
    -webkit-transform: rotieren (0,5 Grad);
            transformieren: drehen (0,5 Grad);
  }
  12,5 % {
    -webkit-transform: rotieren(-1deg);
            transformieren: rotieren(-1deg);
  }
  25 % {
    -webkit-transform: rotieren(1deg);
            transformieren: rotieren(1deg);
  }
  37,5 % {
    -webkit-transform: rotieren (-1,5 Grad);
            transformieren: drehen (-1,5 Grad);
  }
  50 % {
    -webkit-transform: rotieren (2,3 Grad);
            transformieren: drehen(2,3 Grad);
  }
  62,5 % {
    -webkit-transform: rotieren(-2,3 Grad);
            transformieren: drehen(-2,3 Grad);
  }
  75 % {
    -webkit-transform: rotieren (1,5 Grad);
            transformieren: drehen (1,5 Grad);
  }
  87,5 % {
    -webkit-transform: rotieren(-1deg);
            transformieren: rotieren(-1deg);
  }
  100 % {
    -webkit-transform: rotieren (0,5 Grad);
            transformieren: drehen (0,5 Grad);
  }
}
@keyframes Swing-Leg {
  0 % {
    -webkit-transform: rotieren (0,5 Grad);
            transformieren: drehen (0,5 Grad);
  }
  12,5 % {
    -webkit-transform: rotieren(-1deg);
            transformieren: rotieren(-1deg);
  }
  25 % {
    -webkit-transform: rotieren(1deg);
            transformieren: rotieren(1deg);
  }
  37,5 % {
    -webkit-transform: rotieren (-1,5 Grad);
            transformieren: drehen (-1,5 Grad);
  }
  50 % {
    -webkit-transform: rotieren (2,3 Grad);
            transformieren: drehen(2,3 Grad);
  }
  62,5 % {
    -webkit-transform: rotieren(-2,3 Grad);
            transformieren: drehen(-2,3 Grad);
  }
  75 % {
    -webkit-transform: rotieren (1,5 Grad);
            transformieren: drehen (1,5 Grad);
  }
  87,5 % {
    -webkit-transform: rotieren(-1deg);
            transformieren: rotieren(-1deg);
  }
  100 % {
    -webkit-transform: rotieren (0,5 Grad);
            transformieren: drehen (0,5 Grad);
  }
}
@-webkit-keyframes Swing-Tail {
  0 % {
    -webkit-transform: rotieren(-2deg);
            transformieren: rotieren(-2deg);
  }
  12,5 % {
    -webkit-transform: rotieren(4deg);
            transformieren: drehen(4deg);
  }
  25 % {
    -webkit-transform: rotieren(-4deg);
            transformieren: rotieren(-4deg);
  }
  37,5 % {
    -webkit-transform: rotieren(6deg);
            transformieren: rotieren (6 Grad);
  }
  50 % {
    -webkit-transform: rotieren(-9,2 Grad);
            transformieren: drehen(-9,2 Grad);
  }
  62,5 % {
    -webkit-transform: rotieren (9,2 Grad);
            transformieren: rotieren (9,2 Grad);
  }
  75 % {
    -webkit-transform: rotieren(-6deg);
            transformieren: rotieren (-6 Grad);
  }
  87,5 % {
    -webkit-transform: rotieren(4deg);
            transformieren: drehen(4deg);
  }
  100 % {
    -webkit-transform: rotieren(-2deg);
            transformieren: rotieren(-2deg);
  }
}
@keyframes Swing-Tail {
  0 % {
    -webkit-transform: rotieren(-2deg);
            transformieren: rotieren(-2deg);
  }
  12,5 % {
    -webkit-transform: rotieren(4deg);
            transformieren: drehen(4deg);
  }
  25 % {
    -webkit-transform: rotieren(-4deg);
            transformieren: rotieren(-4deg);
  }
  37,5 % {
    -webkit-transform: rotieren(6deg);
            transformieren: rotieren (6 Grad);
  }
  50 % {
    -webkit-transform: rotieren(-9,2 Grad);
            transformieren: drehen(-9,2 Grad);
  }
  62,5 % {
    -webkit-transform: rotieren (9,2 Grad);
            transformieren: rotieren (9,2 Grad);
  }
  75 % {
    -webkit-transform: rotieren(-6deg);
            transformieren: rotieren (-6 Grad);
  }
  87,5 % {
    -webkit-transform: rotieren(4deg);
            transformieren: drehen(4deg);
  }
  100 % {
    -webkit-transform: rotieren(-2deg);
            transformieren: rotieren(-2deg);
  }
}
@-webkit-keyframes Reverse-Swing {
  0 % {
    -webkit-transform: rotieren(-5 Grad);
            transformieren: drehen(-5 Grad);
  }
  12,5 % {
    -webkit-transform: rotieren (10 Grad);
            transformieren: drehen(10 Grad);
  }
  25 % {
    -webkit-transform: rotieren (-10 Grad);
            transformieren: drehen(-10 Grad);
  }
  37,5 % {
    -webkit-transform: rotieren (15 Grad);
            Transformation: Drehen (15DEG);
  }
  50% {
    -Webkit-transform: rotate (-23deg);
            Transformation: Drehen (-23DEG);
  }
  62,5% {
    -Webkit-Transformation: Drehen (23DEG);
            Transformation: Drehen (23DEG);
  }
  75% {
    -Webkit-transform: rotate (-15deg);
            Transformation: rotieren (-15 Grad);
  }
  87,5% {
    -Webkit-Transformation: Drehen (10DEG);
            Transformation: Drehen (10DEG);
  }
  100% {
    -Webkit-transform: rotate (-5deg);
            Transformation: rotieren (-5 Grad);
  }
}
@KeyFrames Reverse-Swing {
  0% {
    -Webkit-transform: rotate (-5deg);
            Transformation: rotieren (-5 Grad);
  }
  12,5% {
    -Webkit-Transformation: Drehen (10DEG);
            Transformation: Drehen (10DEG);
  }
  25% {
    -Webkit-transform: rotate (-10deg);
            Transformation: Drehen (-10 Grad);
  }
  37,5% {
    -Webkit-Transformation: Drehen (15DEG);
            Transformation: Drehen (15DEG);
  }
  50% {
    -Webkit-transform: rotate (-23deg);
            Transformation: Drehen (-23DEG);
  }
  62,5% {
    -Webkit-Transformation: Drehen (23DEG);
            Transformation: Drehen (23DEG);
  }
  75% {
    -Webkit-transform: rotate (-15deg);
            Transformation: Drehen Sie (-15 Grad);
  }
  87,5% {
    -Webkit-Transformation: Drehen (10DEG);
            Transformation: Drehen (10DEG);
  }
  100% {
    -Webkit-transform: rotate (-5deg);
            Transformation: rotieren (-5 Grad);
  }
}
@-webkit-keyframes face {
  0% {
    -Webkit-transform: Translatex (-2,5px);
            Transformation: Translatex (-2,5px);
  }
  12,5% {
    -Webkit-transform: Translatex (5px);
            Transformation: Translatex (5px);
  }
  25% {
    -Webkit-transform: Translatex (-5px);
            transform: translatorX(-5px);
  }
  37,5 % {
    -webkit-transform: TranslateX(7.5px);
            transform: translatorX(7.5px);
  }
  50 % {
    -webkit-transform: TranslateX(-11.5px);
            transform: translatorX(-11.5px);
  }
  62,5 % {
    -webkit-transform: TranslateX(11.5px);
            transform: translatorX(11.5px);
  }
  75 % {
    -webkit-transform: TranslateX(-7.5px);
            transform: translatorX(-7.5px);
  }
  87,5 % {
    -webkit-transform: TranslateX(5px);
            transform: TranslateX(5px);
  }
  100 % {
    -webkit-transform: TranslateX(-2.5px);
            transform: translatorX(-2.5px);
  }
}
@keyframes Gesicht {
  0 % {
    -webkit-transform: TranslateX(-2.5px);
            transform: translatorX(-2.5px);
  }
  12,5 % {
    -webkit-transform: TranslateX(5px);
            transform: TranslateX(5px);
  }
  25 % {
    -webkit-transform: TranslateX(-5px);
            transform: translatorX(-5px);
  }
  37,5 % {
    -webkit-transform: TranslateX(7.5px);
            transform: translatorX(7.5px);
  }
  50 % {
    -webkit-transform: TranslateX(-11.5px);
            transform: translatorX(-11.5px);
  }
  62,5 % {
    -webkit-transform: TranslateX(11.5px);
            transform: translatorX(11.5px);
  }
  75 % {
    -webkit-transform: TranslateX(-7.5px);
            transform: translatorX(-7.5px);
  }
  87,5 % {
    -webkit-transform: TranslateX(5px);
            transform: TranslateX(5px);
  }
  100 % {
    -webkit-transform: TranslateX(-2.5px);
            transform: translatorX(-2.5px);
  }
}
@-webkit-keyframes Einblendung {
  von {
    Deckkraft: 0;
  }
  bis {
    Deckkraft: 1;
  }
}
@keyframes Einblendung {
  von {
    Deckkraft: 0;
  }
  zu {
    Opazität: 1;
  }
}
@-webkit-keyframes blink {
  von 10%, 25%, 80%{
    -Webkit-transform: scaley (1);
            Transformation: Skalyy (1);
  }
  8%, 23%, 78%{
    -Webkit-transform: scaley (0,1);
            Transformation: Skalyy (0,1);
  }
}
@keyframes blink {
  von 10%, 25%, 80%{
    -Webkit-transform: scaley (1);
            Transformation: Skalyy (1);
  }
  8%, 23%, 78%{
    -Webkit-transform: scaley (0,1);
            Transformation: Skalyy (0,1);
  }
}
Körper, html {
  Höhe: 100%;
  Breite: 100%;
  Rand: 0;
  Polsterung: 0;
  Hintergrundfarbe: #1F1F3C;
  Überlauf: versteckt;
}

*, *: vor, *: nach {
  Box-Größe: Border-Box;
  Position: relativ;
  -Webkit-Animation-Timing-Funktion: Kubik-Bezier (0,5, 0, 0,5, 1);
          Animations-Timing-Funktion: Kubikbezier (0,5, 0, 0,5, 1);
  -Webkit-Animation-Fill-Mode: beide;
          Animations-Fill-Mode: Beide;
}

*: vor, *: nach {
  Inhalt: '';
  Anzeige: Block;
}