lokasi sekarang: Rumah > Muat turun > Kesan JS > Kesan khas CSS3 > CSS3 kesan khas kucing tergantung pada rentetan berayun animasi kiri dan kanan
CSS3 kesan khas kucing tergantung pada rentetan berayun animasi kiri dan kanan
Mengelaskan: Kesan JS / Kesan khas CSS3 | Masa keluaran: 2017-12-18 | lawatan: 1923 |
Muat turun: 56 |
Muat turun terkini
Akuarium Fantasi
Gadis Barisan Hadapan
Sayap Bintang
Syurga Peri Peri Bunga Kecil
Kisah Comel Restoran
Penjelajahan Pelancongan Shanhe
Cinta dan Pengeluar
Otak yang paling berkuasa 3
Debu Ganjil: Damila
Perjalanan Muda ke Barat 2
24 jamPapan pendahulu membaca
- 1 Bagaimana untuk Menyelesaikan Ralat \"Campuran Pengumpulan Tidak Sah\" dalam Pertanyaan MySQL?
- 2 dplaysvr.exe - Apakah dplaysvr.exe?
- 3 dpfusmgr.exe - Apakah dpfusmgr.exe?
- 4 dldfdrui.dll - Apakah dldfdrui.dll?
- 5 Bagaimana untuk Melaksanakan Penomboran dengan PHP dan MySQL untuk Set Data Besar?
- 6 Corak Pemerhati
- 7 Bagaimanakah Saya Boleh Menggunakan Pernyataan CASE untuk Menetapkan Nilai Berdasarkan Syarat dalam MySQL?
- 8 Bagaimana untuk Mengendalikan Ralat Pemuatan Imej dengan Atribut onerror dalam Semua Pelayar?
- 9 Bagaimana untuk Semak Kewujudan Watak dalam Rentetan tanpa Gelung di Jawa?
- 10 Mengapakah Saya Tidak Boleh Menentukan Fungsi Bersarang dalam Go, tetapi Saya Boleh Menentukan Struktur Bersarang?
- 11 dm152w.dll - Apakah itu dm152w.dll?
- 12 Adakah Selamat untuk Mengubah Suai Kamus Python Semasa Mengulang Menggunakan `iteritems`?
- 13 Bagaimanakah Saya Boleh Mengutamakan Medan dalam Carian Teks Penuh MySQL untuk Perkaitan yang Dipertingkatkan?
- 14 dmadmin.exe - Apakah dmadmin.exe?
- 15 Adakah \"Double-Back\" untuk Keluar dari Aktiviti Android adalah Ciri Terbina dalam?
Tutorial Terkini
-
- Koleksi lengkap kursus timbunan penuh pembangunan web asing
- 1679 2024-04-24
-
- Gunakan GraphQL praktikal bahasa
- 1951 2024-04-19
-
- Bermula dengan MySQL (Teacher mosh)
- 1772 2024-04-07
-
- Mock.js |. Axios.js |
- 2586 2024-03-29
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;
}