Animasi CSS Keyframe dengan Efek Jeda, Lengkap Beserta Tutorialnya

Pernahkah Anda bertanya-tanya tentang bagaimana kita dapat menjeda animasi ketika dimulai? Kita dapat menggunakan properti tunda animasi tetapi hanya akan menunda pada dimulainya animasi, setelah animasi dimulai akan itu akan terus bernyawa. Setelah animasi keyframe CSS dimulai, ini tidak dapat menghentikannya kecuali kita menggunakan javascript. Jadi bagaimana kita bisa membuat animasi untuk bisa dijeda di antara keyframe?

Solusinya adalah, disini kita akan membuat keyframe dengan nilai yang sama dan beberapa matematika. (apa !? matematika !? 😢) ya untuk mengatur waktu keyframe kita secara akurat.

Sebagai contoh gambar di atas, ia menghidupkan untuk 1s dan berhenti selama 2s dan iterates 4 kali.

Pertama, kita perlu mendapatkan total waktu animasi.

total waktu = (waktu animasi + jeda animasi) * jumlah iterasi total waktu = (waktu animasi + jeda animasi) * jumlah iterasi total waktu = (1d + 2d) * 4 total waktu = 12dt Hitung persentase (%) dari kerangka kunci animasi waktu animasi (%) = (waktu animasi / total waktu) * 100 animasi jeda (%) = (animasi jeda / total waktu) * 100 waktu animasi (%) = (waktu animasi / total waktu) * 100 waktu animasi (%) = (1/12) * 100 waktu animasi (%) = 8,33% (8,33% = 1dari waktu) jeda animasi (%) = (jeda animasi / total waktu) * 100 jeda animasi (%) = (2/12) * 100 animasi jeda (%) = 16,67% (16,67% = 2s dari waktu)

Inisialisasi nilai persentase (%) dari kerangka tombol animasi.

Selanjutnya kita akan menginisialisasi nilai persentase dengan menambahkan waktu animasi dan persentase jeda animasi kemudian menambahkannya hingga iterasi ke-4.

0% (0d) + 8,33% (1d animate) = 8,33% (1d) 8,33% (1d) + 16,67% (2d jeda) = 25% (3d) [iterasi pertama] 25% (3s) + 8,33% (1s bernyawa) = 33,33% (4s) 33,33% (4d) + 16,67% (2d jeda) = 50% (6s) [iterasi kedua] 50% (6s) + 8,33% (1s hidup) = 58,33% (7s) 58,33% (7d) + 16,67% (2d jeda) = 75% (9d) [iterasi ke-3] 75% (9s) + 8,33% (1s bernyawa) = 83,33% (10s) 83,33% (10d) + 16,67% (2d jeda) = 100% (12d) [iterasi ke-4] Sekarang kita punya, 0% → 8,33% → 25% → 33,33% → 50% → 58,33% → 75% → 83,33% → 100%

total waktu = 12dt waktu animasi (%) = 8,33% (8,33% = 1dari waktu) animasi jeda (%) = 16,67% (16,67% = 2s dari waktu) persentase kerangka kunci animasi 0% → 8,33% → 25% → 33,33% → 50% → 58,33% → 75% → 83,33% → 100%

Karena animasi berputar untuk 360deg dan memiliki 4 iterasi.

nilai keyframe = 360/4 = 90deg Kami memiliki 90deg per iterasi, untuk mendapatkan deg di setiap iterasi maka kami akan menambahnya dengan 90deg. 0deg + 90deg = 90deg [iterasi pertama] 90deg + 90deg = 180deg [iterasi ke-2] 180deg + 90deg = 270deg [iterasi ke-3] 260deg + 90deg = 360deg [iterasi ke-4]

Sekarang kita punya,

0deg → 90deg → 180deg → 270deg → 360deg [deg di setiap iterasi]

Sekarang kita memiliki semua nilai yang kita butuhkan, dan mari kita tambahkan Css ini ke kode kita.

.planet{
   animation: rotateEarth 12s infinite
   }
   @keyframes rotateEarth {
     0% {
         transform: rotate(0deg)
           }
             8.33% {
                 transform: rotate(90deg)
                   }
                     25% {
                         transform: rotate(90deg)
                           }
                             33.33% {
                                 transform: rotate(180deg)
                                   }
                                     50% {
                                         transform: rotate(180deg)
                                           }
                                             58.33% {
                                                 transform: rotate(270deg)
                                                   }
                                                     75% {
                                                         transform: rotate(270deg)
                                                           }
                                                             83.33% {
                                                                 transform: rotate(360deg)
                                                                   }
                                                                     100% {
                                                                         transform: rotate(360deg)
                                                                           }
                                                                           }

Seperti yang Anda lihat dalam kode Css di atas, ada beberapa keyframe yang memiliki nilai yang sama. Kita dapat menulis lebih sedikit kode dengan memisahkan koma keyframe yang memiliki nilai yang sama.

@keyframes rotateEarth {
  0% {
      transform: rotate(0deg)
        }
          8.33%, 25% {
              transform: rotate(90deg)
                }
                  33.33%, 50% {
                      transform: rotate(180deg)
                        }
                          58.33%, 75% {
                              transform: rotate(270deg)
                                }
                                  83.33%, 100% {
                                      transform: rotate(360deg)
                                        }
                                        }

Itulah langkah-langkah dan cara membuat, Animasi CSS Keyframe dengan Efek Jeda Di Antara Keyframe. Terimakasih atas waktu Anda yang sudah menyempatkan diri untuk membaca artikel saya. Semoga bermanfaat dan selamat mencobanya.

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini