Tutorial Belajar CSS Bagian 61 : Cara Mengatur Efek Animasi Dengan CSS @keyframes

0
140

Pada tutorial sebelumnya,kita sudah belajar Tutorial Belajar CSS Bagian 60 : Cara Membuat Efek Animasi Dengan CSS Animation. Pada tutorial kali ini kita akan belajar tentang penggunaan @keyframes untuk mengatur animasi.

CSS @keyframes berfungsi menentukan aturan animasi yang mendefinisikan property CSS untuk elemen di setiap keadaan dengan garis waktu.

Kita dapat membuat property animasi yang kompleks dengan menggunakan @keyframes. Animasi dibuat dengan style CSS yang dapat diubah, yang dapat diulang tanpa batas beberapa kali.

Animasi sederhana bisa terdiri dari 2keyframe, sedangkan animasi kompleks memiliki beberapa keyframe.

Sintaksis

@keyframes animation-name {keyframes-selector {css-styles;}}

Untuk menggunakan keyframe, kita perlu membuat aturan @keyframes bersama dengan property animation-name untuk mencocokkan animasi dengan deklarasi keyframe-nya.

Ini menerima 3 nilai. Mari kita bahas masing-masing secara detail.

PropertyNilai
animation-nameIni adalah nilai yang diperlukan yang menentukan nama animasi.
keyframes-selectorIni menentukan persentase bersama dengan animasi ketika keyframe muncul. Nilainya terletak antara 0% sampai 100%, dari (diberi nilai 0%), sampai (diberi nilai 100%). Persentase keyframe dapat ditulis dalam urutan apa pun karena akan ditangani sesuai urutan kemunculannya.
css-stylesIni mendefinisikan satu atau lebih dari satu property style CSS.

Jika aturan keyframe tidak menentukan status awal dan akhir animasi, maka browser akan menggunakan style elemen yang ada.

Property diabaikan karena tidak dapat dianimasikan dalam aturan bingkai utama.

Fungsi pengaturan waktu keyframe

Untuk mengontrol laju animasi, kita dapat menggunakan nilai berikut.

NilaiFungsi
linierArtinya laju transisi akan konstan dari awal hingga akhir.
easeArtinya animasi dimulai dengan lambat, dan setelah jangka waktu tertentu, kecepatannya meningkat, dan sebelum akhir kecepatannya akan melambat lagi.
ease-inMirip dengan ease, namun animasinya berakhir dengan cepat.
ease-outIni juga mirip dengan ease, namun animasinya dimulai dengan cepat.

Contoh 1 :

<!DOCTYPE html>  
<html>  
<head>  
<style>   
    div 
    {  
      width:200px;  
      height:200px;  
      animation:contoh1 5s ease-in infinite, contoh-1-2 5s ease-in-out infinite;  
      border-radius:40px;  
    }  

    @keyframes contoh1  
    {  
     0% {background:red;}  
     50% {background:yellow; width:100px; height:100px;}  
     100% {background:green; width:300px; height:300px;}  
    }  
    @keyframes contoh-1-2 
    {  
     0% {transform:translate(0px) scale(1.4) rotate(80deg);}  
     50% {transform:translate(250px) scale(1.2) rotate(40deg);}  
     100% {transform:translate(350px) scale(1) rotate(0deg);}  
    }  
  
</style>  
</head>  
<body>  
  
    <div></div>  
    <p> Setelah Animasi selesai, elemen kembali ke kondisi awalnya</p>  
  
</body>  
</html>  

Contoh 2 :

<!DOCTYPE html>   
<html>   
<head>   
    <style>    
        h1 {   
            color: black;   
            text-align: center;   
        }   
        div {   
            position: relative;   
            animation: mwp 7s infinite;   
        }   
            
        @keyframes mwp {   
            0% {   
                top: 500px;    
                width: 0px;  
                font-size:10px;  
                transform: translate(0px) scale(1.4) rotate(80deg);  
            }   
            25% {   
                top: 400px;    
                background: yellow;    
                font-size:20px;  
                width: 50px;   
                transform: translate(100px) scale(1.3) rotate(60deg);  
            }   
            50% {   
                top: 300px;    
                background: orange;  
                font-size:30px;  
                width: 150px;   
                transform: translate(200px) scale(1.2) rotate(40deg);  
            }   
            75% {   
                top: 200px;    
                background: pink;    
                width: 250px;   
                font-size:40px;  
                transform: translate(300px) scale(1.1) rotate(20deg);  
            }   
            100% {   
                top: 100px;    
                background: red;  
                font-size:50px;  
                width: 500px;             
                transform: translate(400px) scale(1) rotate(0deg);  
            }   
        }   
    </style>   
</head>   
    
<body>   
    <div>   
        <h1>Mbah WP</h1>   
    </div>   
</body>   
    
</html>   

Poin yang perlu diingat

Beberapa poin penting mengenai peraturan ini adalah sebagai berikut:

  • Selain menggunakan nilai 0%, kita dapat menggunakan kata kunci from.
  • Selain menggunakan nilai 100%, kita dapat menggunakan kata kunci to.
  • Meskipun kita menggunakan kata kunci from dan to, nilai apa pun di antara kata kunci tersebut akan tetap dinyatakan dalam %.
  • Untuk animasi yang valid, waktu mulai dan berakhir harus dituliskan.
  • Deklarasi bisa diabaikan jika ditimpa dengan property !important

Semoga tutorial ini membantu Anda untuk memahami cara mengatur efek animasi pada elemen menggunakan CSS @keyframes.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.