Saya baru -baru ini memperbarui dompet saya di Johnrhea.com. (Jika Anda ingin menambahkan CSS atau insinyur antarmuka dengan narasi cerita dan animasi ke tim Anda, saya adalah pria Anda.) Bagian dari ini adalah penggunaan ulang animasi yang saya buat sekitar 2019, ketika bulan berkisar di sekitar planet ini.
Awalnya, saya baru saja membersihkan animasi di situs baru, cukup ubah unit ( Unit untuk melihat unit pelabuhan menggunakan beberapa matematika kompleks yang sangat saya banggakan) untuk berkembang dengan benar karena saya … <>efektif Dengan waktu saya. Namun, di ponsel, planet ini pindah ke yang tertinggi beberapa piksel dan di bawah beberapa piksel saat bulan berputar di sekitarnya. Saya pikir animasi sekali pakai adalah pelaku (tidak demikian, tapi setidaknya saya mendapat beberapa animasi yang lebih baik dan sebuah artikel di luar kesepakatan).
-Advertisement-.
Berikut adalah animasi aslinya:
Animasi awal bulan berjalan selama 60 detik. Saya memancarkannya di dalam komponen antarmuka pengguna karena, dalam 141 baris, itu adalah hal yang panjang (dan seperti yang akan kita lihat, tekankan <>bodoh). Di sini dalam setiap “kemuliaan”:
Simbol terbuka
#moon1 {
animation: moon-one 60s infinite;
}
@keyframes moon-one {
0% {
transform: translate(0, 0) scale(1);
z-index: 2;
animation-timing-function: ease-in;
}
5% {
transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
z-index: 2;
animation-timing-function: ease-out;
}
9.9% {
z-index: 2;
}
10% {
transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
z-index: -1;
animation-timing-function: ease-in;
}
15% {
transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
z-index: -1;
animation-timing-function: ease-out;
}
19.9% {
z-index: -1;
}
20% {
transform: translate(0, 0) scale(1);
z-index: 2;
animation-timing-function: ease-in;
}
25% {
transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
z-index: 2;
animation-timing-function: ease-out;
}
29.9% {
z-index: 2;
}
30% {
transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
z-index: -1;
animation-timing-function: ease-in;
}
35% {
transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
z-index: -1;
animation-timing-function: ease-out;
}
39.9% {
z-index: -1;
}
40% {
transform: translate(0, 0) scale(1);
z-index: 2;
animation-timing-function: ease-in;
}
45% {
transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
z-index: 2;
animation-timing-function: ease-out;
}
49.9% {
z-index: 2;
}
50% {
transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
z-index: -1;
animation-timing-function: ease-in;
}
55% {
transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
z-index: -1;
animation-timing-function: ease-out;
}
59.9% {
z-index: -1;
}
60% {
transform: translate(0, 0) scale(1);
z-index: 2;
animation-timing-function: ease-in;
}
65% {
transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
z-index: 2;
animation-timing-function: ease-out;
}
69.9% {
z-index: 2;
}
70% {
transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
z-index: -1;
animation-timing-function: ease-in;
}
75% {
transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
z-index: -1;
animation-timing-function: ease-out;
}
79.9% {
z-index: -1;
}
80% {
transform: translate(0, 0) scale(1);
z-index: 2;
animation-timing-function: ease-in;
}
85% {
transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
z-index: 2;
animation-timing-function: ease-out;
}
89.9% {
z-index: 2;
}
90% {
transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
z-index: -1;
animation-timing-function: ease-in;
}
95% {
transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
z-index: -1;
animation-timing-function: ease-out;
}
99.9% {
z-index: -1;
}
100% {
transform: translate(0, 0) scale(1);
z-index: 2;
animation-timing-function: ease-in;
}
}Jika Anda melihat bingkai kunci dalam simbol ini, Anda akan melihat itu 0% ke 20% Ban kunci persis sama dengan 20% ke 40% dan sebagainya 100%. Mengapa Anda memutuskan untuk mengulangi ban kunci lima kali tanpa batas alih -alih hanya mengulangi satu kelompok tanpa batas, keputusan yang hilang di depan zaman kuno, seperti enam tahun yang lalu pada saat web. Kami juga dapat menjatuhkan periode hingga 12 detik (lima enam puluh) jika kami melakukan perawatan yang tepat.
Jadi saya bisa menghapus semuanya 20% ON, jatuhkan simbol segera ke 36 baris. Dan ya, saya menyadari bahwa keuntungan seperti itu tidak mungkin terjadi di sebagian besar situs, tetapi ini adalah langkah pertama untuk meningkatkan hal -hal.
#moon1 {
animation: moon-one 12s infinite;
}
@keyframes moon-one {
0% {
transform: translate(0, 0) scale(1);
z-index: 2;
animation-timing-function: ease-in;
}
5% {
transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
z-index: 2;
animation-timing-function: ease-out;
}
9.9% {
z-index: 2;
}
10% {
transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
z-index: -1;
animation-timing-function: ease-in;
}
15% {
transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
z-index: -1;
animation-timing-function: ease-out;
}
19.9% {
z-index: -1;
}
20% {
transform: translate(0, 0) scale(1);
z-index: 2;
animation-timing-function: ease-in;
}
}Sekarang kami menyingkirkan 80 % dari bit yang luar biasa, kami dapat melihat bahwa ada lima ban utama dan dua tambahan dua tempat. z-index Di dekat tengah dan akhir animasi (ini mencegah bulan jatuh di belakang planet atau muncul dari belakang planet ini sangat awal). Kita dapat mengubah lima poin ini dari 0%Dan 5%Dan 10%Dan 15%Dan 20% ke 0%Dan 25%Dan 50%Dan 75%Dan 100% (Dan sejak itu 0% Dan yang lainnya 20% Itu sama, kita juga bisa menghapusnya). Juga, dari 10% Bingkai utama di atas adalah pergeseran ke 50%, 9.9% Bingkai utama dapat bergerak ke 49.9%Dan 19.9% Bingkai utama bisa berubah menjadi 99.9%Beri kami ini:
#moon1 {
animation: moon-one 12s infinite;
}
@keyframes moon-one {
0%, 100% {
transform: translate(0, 0) scale(1);
z-index: 2;
animation-timing-function: ease-in;
}
25% {
transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
z-index: 2;
animation-timing-function: ease-out;
}
49.9% {
z-index: 2;
}
50% {
transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
z-index: -1;
animation-timing-function: ease-in;
}
75% {
transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
z-index: -1;
animation-timing-function: ease-out;
}
99.9% {
z-index: -1;
}
}Meskipun saya sangat bangga pada diri saya sendiri karena pertengkaran matematika saya, angka seperti -3.51217391vw Ini benar -benar tidak perlu. Jika layar lebar seribu piksel, -3.51217391vw Menjadi 35.1217391 Piksel. Tidak ada yang perlu turun ke akurasi 10 juta piksel. Oleh karena itu, mari kita transfer semuanya ke tempat kesepuluh (dan jika ada 0Kami hanya akan menjatuhkannya). Kami juga bisa melewatkan z-index di dalam 75% Dan 25% Ban kunci karena tidak berubah.
Inilah tempat di mana ini terjadi dalam kode:
#moon1 {
animation: moon-one 12s infinite;
}
@keyframes moon-one {
0%, 100% {
transform: translate(0, 0) scale(1);
z-index: 2;
animation-timing-function: ease-in;
}
25% {
transform: translate(-3.5vw, 3.5vw) scale(1.5);
z-index: 2;
animation-timing-function: ease-out;
}
49.9% {
z-index: 2;
}
50% {
transform: translate(-5vw, 6.5vw) scale(1);
z-index: -1;
animation-timing-function: ease-in;
}
75% {
transform: translate(1vw, 2.5vw) scale(0.25);
z-index: -1;
animation-timing-function: ease-out;
}
99.9% {
z-index: -1;
}
}Setelah semua perubahan kami, animasinya masih terlihat sangat dekat dengan apa yang sebelumnya, simbol yang paling sedikit:
Salah satu hal yang tidak saya sukai dalam animasi ini adalah bahwa tipe bulan berubah menjadi puncak ketika planet ini menyeberang. Akan jauh lebih baik jika dia melakukan perjalanan dalam garis lurus dari kanan ke kanan bawah kiri. Namun, kita juga perlu menjadi sedikit lebih besar, seolah -olah bulan mendekati kita di orbitnya. Karena terjemahan dan ekspansi terjadi transform Properti, saya tidak dapat menerjemahkan bulan dan memperluas jangkauannya secara mandiri.
Jika Anda melewatkan siapa pun transform Properti, itu mengatur ulang orang yang melintasi kami, jadi dia dipaksa untuk menebak di mana itu harus menjadi mid -point sehingga saya dapat mengatur skala yang saya butuhkan. Salah satu cara yang telah saya selesaikan di masa lalu adalah dengan menambahkan elemen pengemasan, lalu terapkan scale Untuk satu elemen dan translate Ke yang lain. Namun, sekarang setelah kita memiliki seorang individu scale Dan translate Karakteristik, cara yang lebih baik adalah memisahkannya transform Properti dan menggunakannya sebagai fitur terpisah. Perpisahan terjemahan dan ekspansi tidak boleh mengubah apa pun, kecuali jika masalah asli diumumkan transform Properti ini berbeda dari mengatur karakteristik individu.
#moon1 {
animation: moon-one 12s infinite;
}
@keyframes moon-one {
0%, 100% {
translate: 0 0;
scale: 1;
z-index: 2;
animation-timing-function: ease-in;
}
25% {
translate: -3.5vw 3.5vw;
z-index: 2;
animation-timing-function: ease-out;
}
49.9% {
z-index: 2;
}
50% {
translate: -5vw 6.5vw;
scale: 1;
z-index: -1;
animation-timing-function: ease-in;
}
75% {
translate: 1vw 2.5vw;
scale: 0.25;
animation-timing-function: ease-out;
}
99.9% {
z-index: -1;
}
}Sekarang kita bisa berpisah scale Dan translate Properti dan menggunakannya secara mandiri, kita bisa jatuh translate Properti di 25% Dan 75% Bingkai kunci karena kami tidak ingin menempatkannya secara khusus di bingkai utama ini. Kami ingin merawat browser untuk melakukannya untuk kami sehingga diterjemahkan dengan lancar selama penskalaan.
#moon1 {
animation: moon-one 12s infinite;
}
@keyframes moon-one {
0%, 100% {
translate: 0 0;
scale: 1;
z-index: 2;
animation-timing-function: ease-in;
}
25% {
scale: 1.5;
animation-timing-function: ease-out;
}
49.9% {
z-index: 2;
}
50% {
translate: -5vw 6.5vw;
scale: 1;
z-index: -1;
animation-timing-function: ease-in;
}
75% {
scale: 0.25;
animation-timing-function: ease-out;
}
99.9% {
z-index: -1;
}
}Akhirnya, fungsi waktu yang berbeda ini tidak lagi logis lagi karena kami menggunakan browser untuk kami, dan jika kami menggunakan ease-in-out Fungsi waktu dalam segala hal, maka Anda harus melakukan persis apa yang kami inginkan.
#moon1 {
animation: moon-one 12s infinite ease-in-out;
}
@keyframes moon-one {
0%, 100% {
translate: 0 0;
scale: 1;
z-index: 2;
}
25% {
scale: 1.5;
}
49.9% {
z-index: 2;
}
50% {
translate: -5vw 6.5vw;
scale: 1;
z-index: -1;
}
75% {
scale: 0.25;
}
99.9% {
z-index: -1;
}
}Begitulah: 141 baris ke 28, dan saya pikir animasinya terlihat lebih baik dari sebelumnya. Pasti akan lebih mudah untuk menyimpannya, dan ini pasti.
Tapi bagaimana menurutmu? Apakah ada langkah untuk meningkatkan saya? Beri tahu saya di komentar.
Mekanika kesukuan (atau bagaimana Anda meningkatkan CSS Keyflams) yang awalnya diterbitkan di CSS-Tricks, yang merupakan bagian dari keluarga Digitalocean. Anda harus mendapatkan buletin.
-Advertisement-.
