Transisi ~ Pemrograman dan Teknologi

Selain animation, properti lain yang bisa kita gunakan untuk mengerakan atau mengubah elemen HTML adalah transition. Transition berguna untuk memberikan transisi yang halus saat suatu properti CSS dari suatu elemen berubah. Transisi akan berguna saat kita menggunakan dari pseudo element. Transisi membutuhkan beberapa properti yang bisa kalian lihat di bawah ini.

Transition-property : Properti yang akan diubah saat transisi.
Transition-delay : Penundaan awal transisi.
Transition-duration : Durasi transisi
Transition-timing-function : Jenis timing pada transisi.
Transition : Versi singkat dari semua properti transisi.

Contoh kode HTML-nya bisa kalian lihat di bawah ini.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <STYLE>      
        #animasi{
            height:40px;
            width:80px;
            background-color:red;
            transition-property: background-color;
            transition-duration: 2s;
            transition-timing-function: linear;
            transition-delay: 0s;
        }
      
        #animasi:hover{
            background-color:black;
        }
    </STYLE>
</HEAD>
<BODY>
    <div id="animasi">
        <p>TEST</p>
    </div>
</BODY>
</HTML>

Transition membutuhkan pemicu sebelum perubahan dimulai. Contoh di atas menggunakan hover. Karena itu, kalian harus melewatkan mouse di atas "kotak" yang sudah diberi efek transisi supaya bisa melihat perubahannya. Jika kalian menggunakan smartphone, kalian bisa mendapatkan hasil yang sama dengan menyentuhnya.

Kalian bisa mempersingkat penulisan kode HTML di atas dengan menggunakan properti transition sehingga jadi seperti di bawah ini.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <STYLE>      
        #animasi{
            height:40px;
            width:80px;
            background-color:red;
            transition: background-color 2s linear 0s;
        }
      
        #animasi:hover{
            background-color:black;
        }
    </STYLE>
</HEAD>
<BODY>
    <div id="animasi">
        <p>TEST</p>
    </div>
</BODY>
</HTML>

Hasil kode HTML di atas sama dengan kode HTML sebelumnya.