Tutorial CSS: Membuat Animasi Berpindah dengan @keyframes

Home Coding HTML-CSS

Jenis animasi lainnya yang dapat dibuat dengan menggunakan @keyframes adalah animasi pindah tempat.

Pada contoh berikut animasi akan berpindah dari kiri ke kanan. Animasi dideklarasi dengan nama "move-toRight". Animasi akan bergerak berdasar pada sumbu-X. yaitu dari -150px ke 0px sumbu-X

Perlu diperhatikan bahwa posisi akhir animasi harus sesuai dengan posisi sebenarnya dari objek yang dibuat. Dalam hal ini posisi sebenarnya dari objek adalah 0px. Maka posisi akhir animasi (100%) harus pada 0px.

        
        @keyframes move-toRight {
          0% {
            transform: translateX(-150px);
          }
          100% {
            transform: translateX(0px);
          }
        }

Setelah animasi selesai dibuat, selanjutnya penerapan animasi pada element dengan tinggi 100px, lebar 200px, dan warna-latar hitam. Nama animasi yang dijalankan adalah "move-toRight" yang sebelumnya telah dideklarasikan, durasi animasi: 3 detik, dengan "animation-timing-function" adalah "ease".

      
        .rect-movetoRight { 
          width: 200px;
          height: 100px;
          background-color: black;
          animation: move-toRight 3s ease; 
        }

Adapun pada bagian HTML, cukup dengan menerapkan class pada tag seperti berikut ini.

      
        <div class="rect-movetoRight"></div>

Dan Animasi telah selesai dibuat, animasi dapat anda lihat tepat dibawah ini. Animasi berawal dari kiri ke kanan dengan lama pergerakan 3 detik.

Perlu diperhatikan bahwa animasi berjalan sesaat setelah website dibuka. Jika animasi tidak berjalan sesuai dengan yang diinginkan, cobalah untuk memulai-ulang (refresh) halaman ini .

Jika Animasi sebelumnya digabungkan digabungkan maka akan menghasilkan animasi seperti berikut.

        
        .rect-fadeRight {
          width: 200px;
          height: 100px;
          background-color: black;
          animation: fadeRight 3s ease;
        }
                
        @keyframes fadeRight {
          0% {
            opacity: 0;
            transform: translateX(-150px);
          }
          100% {
            opacity: 1;
            transform: translateX(0px);
          }
        }

      
        <div class="rect-fadeRight "></div>

Sekian, Semoga bermanfaat