Cara penggunaan Properti Transisi CSS

Cara penggunaan Properti Transisi CSS - Transisi CSS merupakan suatu efek yang memungkian kita untuk melakukan perubahan dari satu nilai ke nilai lainnya dengan durasi yang telah ditentukan. Banyak sekali transisi yang bisa kita manfaatkan untuk membuat efek. Pada kesempatan kali in akan saya bahas salah satu transisi CSS yakni transition-duration. Nah, bagaimana cara menggunakannya simak Cara penggunaan Properti Transisi CSS berikut ini.

Yang harus diperhatikan dalam menggunakan transisi adalah :

  1. Tentukan terlebih dahulu objek yang akan ditambahkan transisi
  2. Properti CSS yakni transition
  3. Durasi transisi

Secara default penulisan trasisi seperti berikut.

transiton: 4s;

Dimana transiton sebagai properti dan 4s adalah durasi transisi yang diberikan terhadap objek, semakin besar nilai yang diberikan maka akan semakin lama durasi perubahan pada objeknya.

Berikut akan saya praktekan penggunaan transition pada beberapa objek, silahkan kalian bisa ikuti langkah - langkahnya berikut ini.

Silahkan buat satu file index.html kemudian kalian bisa membuat struktur HTML dan membuat beberapa objek, dalam hal ini ada button, dan box.

<body>
    <!-- Transition Button -->
    <button class="btn1">BUTTON</button>
    <button class="btn2">BUTTON</button>

    <!-- Transition Width -->
    <div id="box"></div>
</body>

Setelah selesai membuat struktur, selanjutnya kita akan membuat efek transisi dengan transition CSS seperti berikut.

<style type="text/css">
    button {
        padding: 10px 20px;
        border-radius: 3px;
        cursor: pointer;
        background: transparent;
        transition: 0.5s;
    }
    .btn1 {
        border: 2px solid salmon;
    }
    .btn1:hover {
        border: 2px solid salmon;
        background-color: salmon;
        color: white;
    }
    .btn2 {
        border: 2px solid aqua;
    }
    .btn2:hover {
        border: 2px solid aqua;
        background-color: aqua;
        color: white;
    }

    #box {
        width: 80px;
        height: 80px;
        background: #f90;
        margin-top: 30px;
        transition: 2s;
        cursor: pointer;
    }
    #box:hover {
        width: 200px;
    }
</style>

Setelah semua sintak telah diketikan silahkan simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya.

Bagaimana, mudah dan menarik bukan hasil yang ditampilkan ? baiklah cukup sekian tutorial mengenai bagaimana Cara penggunaan Properti Transisi CSS, semoga bermanfaat dan selamat mencoba :)

5 Juli 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat