CSS3 kesan khas kucing tergantung pada rentetan berayun animasi kiri dan kanan

CSS3 kesan khas kucing tergantung pada rentetan berayun animasi kiri dan kanan ialah kesan hayunan animasi yang dibuat dengan CSS3

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

<gaya>
.semua balutan {
  -webkit-animasi: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
          animasi: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}

.semua {
  atas: 10rem;
  kiri: calc(50% - 2.5rem);
  jawatan: mutlak;
  lebar: 5rem;
  tinggi: 5rem;
  -webkit-transform-asal: pusat -20rem;
          transform-asal: pusat -20rem;
  -webkit-animasi: hayun 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
          animasi: hayun 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}
.semua:sebelum {
  tinggi: 20rem;
  lebar: 2px;
  warna latar belakang: #DB242A;
  kiri: calc(50% - 1px);
  bawah: 20rem;
}

.benang {
  jawatan: mutlak;
  atas: 0;
  kiri: 0;
  lebar: 80px;
  ketinggian: 80px;
  jejari sempadan: 50%;
  imej latar belakang: -webkit-radial-gradient(kiri atas, bulatan, #e97c7f, #db242a 50%, #af1d22);
  imej latar belakang: radial-gradient(bulatan di sebelah kiri atas, #e97c7f, #db242a 50%, #af1d22);
  indeks z: 1;
}
.benang:sebelum, .benang:selepas {
  jawatan: mutlak;
  lebar: 20px;
  ketinggian: 20px;
  jejari sempadan: 50%;
  warna latar belakang: putih;
  atas: -1px;
}
.benang:sebelum {
  kiri: calc(50% + 7px);
  warna latar belakang: #b1bce6;
}
.benang:selepas {
  kanan: calc(50% + 7px);
  warna latar belakang: #D5E8F8;
}

.balut kucing {
  jawatan: mutlak;
  atas: 0;
  kiri: calc(50% - 45px);
  lebar: 90px;
  ketinggian: 130px;
  -webkit-animasi: ayunan undur 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
          animasi: ayunan undur 7s cubic-bezier(0.5, 0, 0.5, 1) tak terhingga kedua-duanya;
  -webkit-transform-asal: tengah atas;
          transform-asal: tengah atas;
}

.kucing {
  jawatan: mutlak;
  atas: 0;
  kiri: 0;
  lebar: 100%;
  ketinggian: 100%;
  -webkit-animasi: hayun 7s 0.2s tak terhingga kedua-duanya;
          animasi: hayun 7s 0.2s tak terhingga kedua-duanya;
  -webkit-transform-asal: tengah atas;
          transform-origin: tengah atas;
}

.cat-atas {
  jawatan: mutlak;
  atas: 0;
  kiri: 0;
  lebar: 100%;
  ketinggian: 100%;
  -webkit-transform-asal: tengah atas;
          transform-asal: tengah atas;
  indeks z: 1;
}
.cat-atas .cat-leg {
  jawatan: mutlak;
  lebar: 20px;
  ketinggian: 100%;
  warna latar belakang: putih;
  indeks-z: -1;
  imej latar belakang: -webkit-linear-gradient(kiri, #D5E8F8, #D5E8F8 20%, #8B9BD9);
  imej latar belakang: kecerunan linear(ke kanan, #D5E8F8, #D5E8F8 20%, #8B9BD9);
}
.cat-atas .cat-leg:nth-child(1) {
  sempadan-atas-kiri-jejari: 100px;
  kiri: 10px;
}
.cat-atas .cat-leg:nth-child(1):selepas {
  kiri: 50%;
}
.cat-atas .cat-leg:nth-child(2) {
  sempadan-atas-kiri-radius: 0;
  jejari sempadan-atas-kanan: 100px;
  kanan: 10px;
}
.cat-atas .cat-leg:nth-child(2):selepas {
  kanan: 50%;
}

.cat-lower-wrap {
  ketinggian: 90%;
  lebar: 100%;
  jawatan: mutlak;
  atas: 100%;
  lebar: 75px;
  kiri: calc(50% - 37.5px);
  -webkit-animasi: ayunan undur 7s 0.2s tak terhingga kedua-duanya;
          animasi: ayunan undur 7s 0.2s tak terhingga kedua-duanya;
  -webkit-transform-asal: tengah atas;
          transform-asal: tengah atas;
}

.cat-lower {
  jawatan: mutlak;
  atas: 0;
  kiri: 0;
  lebar: 100%;
  ketinggian: 100%;
  -webkit-animasi: hayun 7s 0.5s tak terhingga kedua-duanya;
          animasi: hayun 7s 0.5s tak terhingga kedua-duanya;
  -webkit-transform-asal: tengah atas;
          transform-asal: tengah atas;
}
.cat-lower:selepas {
  jawatan: mutlak;
  atas: 0;
  kiri: 0;
  lebar: 100%;
  ketinggian: 100%;
  jejari sempadan: 100px;
  imej latar belakang: -webkit-radial-gradient(10px 50px, bulatan, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
  imej latar belakang: radial-gradient(bulatan pada 10px 50px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
  indeks z: 1;
}
.cat-lower .cat-leg, .cat-lower .cat-paw {
  indeks-z: -1;
  jawatan: mutlak;
  ketinggian: 20px;
  lebar: 20px;
  -webkit-animasi: hayun-kaki 7s 0.3s tak terhingga kedua-duanya;
          animasi: kaki hayun 7s 0.3s tak terhingga kedua-duanya;
  indeks z: 1;
  -webkit-transform-asal: tengah atas;
          transform-asal: tengah atas;
  sempadan-atas-kiri-radius: 20px;
  sempadan-atas-kanan-jejari: 20px;
  imej latar belakang: -webkit-linear-gradient(kiri, putih, #D5E8F8, #8B9BD9);
  imej latar belakang: kecerunan linear(ke kanan, putih, #D5E8F8, #8B9BD9);
}
.cat-lower > .kaki kucing {
  bawah: 20px;
}
.cat-lower > .kaki-kucing .kaki-kucing {
  atas: 25%;
}
.cat-lower > .kaki-kucing + .kaki-kucing {
  kanan: 0;
}
.cat-lower .cat-paw {
  atas: 50%;
  jejari sempadan: 50%;
  warna latar belakang: #fff;
}
.cat-lower .cat-tail {
  jawatan: mutlak;
  ketinggian: 15px;
  lebar: 10px;
  -webkit-animasi: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
          animasi: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
  -webkit-transform-asal: tengah atas;
          transform-asal: tengah atas;
  indeks z: 0;
  imej latar belakang: -webkit-linear-gradient(kiri, putih, #D5E8F8, #8B9BD9);
  imej latar belakang: kecerunan linear(ke kanan, putih, #D5E8F8, #8B9BD9);
  sempadan-bawah-kiri-radius: 10px;
  sempadan-bawah-kanan-jejari: 10px;
}
.cat-lower .cat-tail > .ekor kucing {
  atas: 50%;
}
.cat-lower > .ekor kucing {
  kiri: calc(50% - 5px);
  atas: 95%;
}

.kepala kucing {
  lebar: 90px;
  ketinggian: 90px;
  imej latar belakang: -webkit-radial-gradient(10px 10px, bulatan, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
  imej latar belakang: radial-gradient(bulatan pada 10px 10px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
  jejari sempadan: 50%;
  atas: calc(100% - 45px);
}

.muka kucing {
  jawatan: mutlak;
  atas: 0;
  kiri: 0;
  ketinggian: 100%;
  lebar: 100%;
  -webkit-animasi: hadapi 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
          animasi: hadapi 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -perspektif webkit: 100px;
          perspektif: 100px;
}

.kucing-telinga {
  jawatan: mutlak;
  atas: 0;
  kiri: 0;
  ketinggian: 50%;
  lebar: 100%;
  indeks-z: -1;
}

.kucing-telinga {
  lebar: 20px;
  ketinggian: 100%;
  jawatan: mutlak;
  jejari sempadan: 5px;
  atas: -10px;
}
.kucing-telinga:anak pertama {
  kiri: 0;
  -webkit-transform-origin: kiri atas;
          transform-origin: kiri atas;
  -webkit-transform: skewY(40deg);
          transform: condong(40deg);
  warna latar belakang: putih;
}
.kucing telinga:anak pertama:sebelum {
  kiri: 0;
  jejari sempadan atas kanan: 50%;
  sempadan-bawah-kanan-jejari: 50%;
  warna latar belakang: #D7EBFB;
}
.kucing-telinga:anak-terakhir {
  kanan: 0;
  -webkit-transform-origin: atas kanan;
          transform-origin: atas kanan;
  -webkit-transform: skewY(-40deg);
          transform: condong(-40deg);
  warna latar belakang: #d1e6f7;
}
.cat-ear:last-child:sebelum {
  kanan: 0;
  sempadan-atas-kiri-radius: 50%;
  sempadan-bawah-kiri-radius: 50%;
  warna latar belakang: #e0f0fc;
}
.cat-ear:sebelum {
  lebar: 60%;
  ketinggian: 100%;
  atas: 10px;
  jawatan: mutlak;
  warna latar belakang: #fff;
}

.mata kucing {
  jawatan: mutlak;
  atas: 50%;
  lebar: 100%;
  ketinggian: 6px;
  -webkit-animasi: blink 7s step-end infinite both;
          animasi: blink 7s step-end infinite both;
}
.cat-eyes:sebelum ini, .cat-eyes:selepas {
  jawatan: mutlak;
  ketinggian: 6px;
  lebar: 6px;
  jejari sempadan: 50%;
  warna latar belakang: #4B4D75;
}
.cat-eyes:sebelum {
  kiri: 20px;
}
.cat-eyes:selepas {
  kanan: 20px;
}

.mulut kucing {
  jawatan: mutlak;
  lebar: 12px;
  ketinggian: 8px;
  warna latar belakang: #4B4D75;
  atas: 60%;
  kiri: calc(50% - 6px);
  sempadan-atas-kiri-radius: 50% 30%;
  jejari sempadan atas kanan: 50% 30%;
  sempadan-bawah-kiri-radius: 50% 70%;
  sempadan-bawah-kanan-jejari: 50% 70%;
  -webkit-transform: translateZ(10px);
          transform: translateZ(10px);
}
.mulut kucing:sebelum, .mulut kucing:selepas {
  jawatan: mutlak;
  lebar: 90%;
  ketinggian: 100%;
  sempadan: 2px pepejal #9FA2CB;
  atas: 80%;
  jejari sempadan: 100px;
  warna atas sempadan: lutsinar;
  indeks-z: -1;
}
.mulut kucing:sebelum {
  warna sempadan-kiri: lutsinar;
  kanan: calc(50% - 1px);
  -webkit-transform-origin: atas kanan;
          transform-origin: atas kanan;
  -webkit-transform: rotate(10deg);
          transform: putar(10deg);
}
.mulut kucing:selepas {
  warna sempadan-kanan: lutsinar;
  kiri: calc(50% - 1px);
  -webkit-transform-origin: kiri atas;
          transform-origin: kiri atas;
  -webkit-transform: putar(-10deg);
          transform: putar(-10deg);
}

.kumis kucing {
  lebar: 50%;
  ketinggian: 8px;
  jawatan: mutlak;
  bawah: 25%;
  kiri: 25%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -perspektif webkit: 60px;
          perspektif: 60px;
}
.kumis-kucing:sebelum ini, .kumis-kucing:selepas {
  jawatan: mutlak;
  ketinggian: 100%;
  lebar: 30%;
  sempadan: 2px pepejal #9FA2CB;
  sempadan-kiri: tiada;
  sempadan-kanan: tiada;
}
.kumis-kucing:sebelum {
  kanan: 100%;
  -webkit-transform-asal: tengah kanan;
          transform-asal: tengah kanan;
  -webkit-transform: rotateY(70deg) rotateZ(-10deg);
          transform: rotateY(70deg) rotateZ(-10deg);
}
.kumis-kucing:selepas {
  kiri: 100%;
  -webkit-transform-asal: tengah kiri;
          transform-asal: tengah kiri;
  -webkit-transform: rotateY(-70deg) rotateZ(10deg);
          transform: rotateY(-70deg) rotateZ(10deg);
}

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

@keyframes bob {
  0% {
    -webkit-transform: translateY(0.4rem);
            transform: translateY(0.4rem);
  }
  6.25% {
    -webkit-transform: translateY(-0.4rem);
            transform: translateY(-0.4rem);
  }
  12.5% ​​{
    -webkit-transform: translateY(0.4rem);
            transform: translateY(0.4rem);
  }
  18.75% {
    -webkit-transform: translateY(-0.4rem);
            transform: translateY(-0.4rem);
  }
  25% {
    -webkit-transform: translateY(0.4rem);
            transform: translateY(0.4rem);
  }
  31.25% {
    -webkit-transform: translateY(-0.4rem);
            transform: translateY(-0.4rem);
  }
  37.5% {
    -webkit-transform: translateY(0.4rem);
            transform: translateY(0.4rem);
  }
  43.75% {
    -webkit-transform: translateY(-0.4rem);
            transform: translateY(-0.4rem);
  }
  50% {
    -webkit-transform: translateY(0.4rem);
            transform: translateY(0.4rem);
  }
  56.25% {
    -webkit-transform: translateY(-0.4rem);
            transform: translateY(-0.4rem);
  }
  62.5% {
    -webkit-transform: translateY(0.4rem);
            transform: translateY(0.4rem);
  }
  68.75% {
    -webkit-transform: translateY(-0.4rem);
            transform: translateY(-0.4rem);
  }
  75% {
    -webkit-transform: translateY(0.4rem);
            transform: translateY(0.4rem);
  }
  81.25% {
    -webkit-transform: translateY(-0.4rem);
            transform: translateY(-0.4rem);
  }
  87.5% {
    -webkit-transform: translateY(0.4rem);
            transform: translateY(0.4rem);
  }
  93.75% {
    -webkit-transform: translateY(-0.4rem);
            transform: translateY(-0.4rem);
  }
  100% {
    -webkit-transform: translateY(0.4rem);
            transform: translateY(0.4rem);
  }
}
@-webkit-keyframes berayun {
  0% {
    -webkit-transform: rotate(5deg);
            transform: putar(5deg);
  }
  12.5% ​​{
    -webkit-transform: putar(-10deg);
            transform: putar(-10deg);
  }
  25% {
    -webkit-transform: rotate(10deg);
            transform: putar(10deg);
  }
  37.5% {
    -webkit-transform: putar(-15deg);
            transform: putar(-15deg);
  }
  50% {
    -webkit-transform: rotate(23deg);
            transform: putar(23deg);
  }
  62.5% {
    -webkit-transform: rotate(-23deg);
            transform: putar(-23deg);
  }
  75% {
    -webkit-transform: rotate(15deg);
            transform: putar(15deg);
  }
  87.5% {
    -webkit-transform: putar(-10deg);
            transform: putar(-10deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
            transform: putar(5deg);
  }
}
@keyframes hayun {
  0% {
    -webkit-transform: rotate(5deg);
            transform: putar(5deg);
  }
  12.5% ​​{
    -webkit-transform: putar(-10deg);
            transform: putar(-10deg);
  }
  25% {
    -webkit-transform: rotate(10deg);
            transform: putar(10deg);
  }
  37.5% {
    -webkit-transform: putar(-15deg);
            transform: putar(-15deg);
  }
  50% {
    -webkit-transform: rotate(23deg);
            transform: putar(23deg);
  }
  62.5% {
    -webkit-transform: rotate(-23deg);
            transform: putar(-23deg);
  }
  75% {
    -webkit-transform: rotate(15deg);
            transform: putar(15deg);
  }
  87.5% {
    -webkit-transform: putar(-10deg);
            transform: putar(-10deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
            transform: putar(5deg);
  }
}
@-webkit-keyframes hayun-kaki {
  0% {
    -webkit-transform: rotate(0.5deg);
            transform: putar(0.5deg);
  }
  12.5% ​​{
    -webkit-transform: rotate(-1deg);
            transform: putar(-1deg);
  }
  25% {
    -webkit-transform: rotate(1deg);
            transform: putar(1deg);
  }
  37.5% {
    -webkit-transform: putar(-1.5deg);
            transform: putar(-1.5deg);
  }
  50% {
    -webkit-transform: rotate(2.3deg);
            transform: putar(2.3deg);
  }
  62.5% {
    -webkit-transform: rotate(-2.3deg);
            transform: putar(-2.3deg);
  }
  75% {
    -webkit-transform: rotate(1.5deg);
            transform: putar(1.5deg);
  }
  87.5% {
    -webkit-transform: rotate(-1deg);
            transform: putar(-1deg);
  }
  100% {
    -webkit-transform: rotate(0.5deg);
            transform: putar(0.5deg);
  }
}
@keyframes kaki hayun {
  0% {
    -webkit-transform: rotate(0.5deg);
            transform: putar(0.5deg);
  }
  12.5% ​​{
    -webkit-transform: rotate(-1deg);
            transform: putar(-1deg);
  }
  25% {
    -webkit-transform: rotate(1deg);
            transform: putar(1deg);
  }
  37.5% {
    -webkit-transform: putar(-1.5deg);
            transform: putar(-1.5deg);
  }
  50% {
    -webkit-transform: rotate(2.3deg);
            transform: putar(2.3deg);
  }
  62.5% {
    -webkit-transform: rotate(-2.3deg);
            transform: putar(-2.3deg);
  }
  75% {
    -webkit-transform: rotate(1.5deg);
            transform: putar(1.5deg);
  }
  87.5% {
    -webkit-transform: rotate(-1deg);
            transform: putar(-1deg);
  }
  100% {
    -webkit-transform: rotate(0.5deg);
            transform: putar(0.5deg);
  }
}
@-webkit-keyframes swing-tail {
  0% {
    -webkit-transform: rotate(-2deg);
            transform: putar(-2deg);
  }
  12.5% ​​{
    -webkit-transform: rotate(4deg);
            transform: putar(4deg);
  }
  25% {
    -webkit-transform: rotate(-4deg);
            transform: putar(-4deg);
  }
  37.5% {
    -webkit-transform: rotate(6deg);
            transform: putar(6deg);
  }
  50% {
    -webkit-transform: rotate(-9.2deg);
            transform: putar(-9.2deg);
  }
  62.5% {
    -webkit-transform: rotate(9.2deg);
            transform: putar(9.2deg);
  }
  75% {
    -webkit-transform: rotate(-6deg);
            transform: putar(-6deg);
  }
  87.5% {
    -webkit-transform: rotate(4deg);
            transform: putar(4deg);
  }
  100% {
    -webkit-transform: rotate(-2deg);
            transform: putar(-2deg);
  }
}
@keyframes swing-tail {
  0% {
    -webkit-transform: rotate(-2deg);
            transform: putar(-2deg);
  }
  12.5% ​​{
    -webkit-transform: rotate(4deg);
            transform: putar(4deg);
  }
  25% {
    -webkit-transform: rotate(-4deg);
            transform: putar(-4deg);
  }
  37.5% {
    -webkit-transform: rotate(6deg);
            transform: putar(6deg);
  }
  50% {
    -webkit-transform: rotate(-9.2deg);
            transform: putar(-9.2deg);
  }
  62.5% {
    -webkit-transform: rotate(9.2deg);
            transform: putar(9.2deg);
  }
  75% {
    -webkit-transform: rotate(-6deg);
            transform: putar(-6deg);
  }
  87.5% {
    -webkit-transform: rotate(4deg);
            transform: putar(4deg);
  }
  100% {
    -webkit-transform: rotate(-2deg);
            transform: putar(-2deg);
  }
}
@-webkit-keyframes reverse-swing {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: putar(-5deg);
  }
  12.5% ​​{
    -webkit-transform: rotate(10deg);
            transform: putar(10deg);
  }
  25% {
    -webkit-transform: putar(-10deg);
            transform: putar(-10deg);
  }
  37.5% {
    -webkit-transform: rotate(15deg);
            transform: putar(15deg);
  }
  50% {
    -webkit-transform: rotate(-23deg);
            transform: putar(-23deg);
  }
  62.5% {
    -webkit-transform: rotate(23deg);
            transform: putar(23deg);
  }
  75% {
    -webkit-transform: putar(-15deg);
            transform: putar(-15deg);
  }
  87.5% {
    -webkit-transform: rotate(10deg);
            transform: putar(10deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
            transform: putar(-5deg);
  }
}
@keyframes ayunan terbalik {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: putar(-5deg);
  }
  12.5% ​​{
    -webkit-transform: rotate(10deg);
            transform: putar(10deg);
  }
  25% {
    -webkit-transform: putar(-10deg);
            transform: putar(-10deg);
  }
  37.5% {
    -webkit-transform: rotate(15deg);
            transform: putar(15deg);
  }
  50% {
    -webkit-transform: rotate(-23deg);
            transform: putar(-23deg);
  }
  62.5% {
    -webkit-transform: rotate(23deg);
            transform: putar(23deg);
  }
  75% {
    -webkit-transform: putar(-15deg);
            transform: putar(-15deg);
  }
  87.5% {
    -webkit-transform: rotate(10deg);
            transform: putar(10deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
            transform: putar(-5deg);
  }
}
@-webkit-keyframes menghadapi {
  0% {
    -webkit-transform: translateX(-2.5px);
            transform: translateX(-2.5px);
  }
  12.5% ​​{
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  25% {
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
  }
  37.5% {
    -webkit-transform: translateX(7.5px);
            transform: translateX(7.5px);
  }
  50% {
    -webkit-transform: translateX(-11.5px);
            transform: translateX(-11.5px);
  }
  62.5% {
    -webkit-transform: translateX(11.5px);
            transform: translateX(11.5px);
  }
  75% {
    -webkit-transform: translateX(-7.5px);
            transform: translateX(-7.5px);
  }
  87.5% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(-2.5px);
            transform: translateX(-2.5px);
  }
}
@keyframes muka {
  0% {
    -webkit-transform: translateX(-2.5px);
            transform: translateX(-2.5px);
  }
  12.5% ​​{
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  25% {
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
  }
  37.5% {
    -webkit-transform: translateX(7.5px);
            transform: translateX(7.5px);
  }
  50% {
    -webkit-transform: translateX(-11.5px);
            transform: translateX(-11.5px);
  }
  62.5% {
    -webkit-transform: translateX(11.5px);
            transform: translateX(11.5px);
  }
  75% {
    -webkit-transform: translateX(-7.5px);
            transform: translateX(-7.5px);
  }
  87.5% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(-2.5px);
            transform: translateX(-2.5px);
  }
}
@-webkit-keyframes fade-in {
  daripada {
    kelegapan: 0;
  }
  kepada {
    kelegapan: 1;
  }
}
@keyframes fade-in {
  daripada {
    kelegapan: 0;
  }
  kepada {
    kelegapan: 1;
  }
}
@-webkit-keyframes berkelip {
  daripada, kepada, 10%, 25%, 80% {
    -webkit-transform: skalaY(1);
            transform: skalaY(1);
  }
  8%, 23%, 78% {
    -webkit-transform: skalaY(0.1);
            transform: skalaY(0.1);
  }
}
@keyframes berkelip {
  daripada, kepada, 10%, 25%, 80% {
    -webkit-transform: skalaY(1);
            transform: skalaY(1);
  }
  8%, 23%, 78% {
    -webkit-transform: skalaY(0.1);
            transform: skalaY(0.1);
  }
}
badan, html {
  ketinggian: 100%;
  lebar: 100%;
  jidar: 0;
  pelapik: 0;
  warna latar belakang: #1F1F3C;
  limpahan: tersembunyi;
}

*, *:sebelum, *:selepas {
  saiz kotak: kotak sempadan;
  jawatan: saudara;
  -fungsi-masa-animasi-webkit: cubic-bezier(0.5, 0, 0.5, 1);
          fungsi pemasaan animasi: cubic-bezier(0.5, 0, 0.5, 1);
  -mod-isi-animasi-webkit: kedua-duanya;
          mod-isi-animasi: kedua-duanya;
}

*:sebelum, *:selepas {
  kandungan: '';
  paparan: blok;
}