Cara Membuat Animasi Label Input

18/12/2019    Risman Hakim    349     Website

Cara Membuat Animasi Label Input - Satu animasi yang akan saya bagikan berikut ini adalah animasi label pada input. Buat teman - teman yang ingin mencoba membuat animasi sederhana pada inputan bisa mengikuti langkah - langkah yang saya berikan.

Pada kasus animasi label input ini, saya akan membuat animasinya dengan CSS dengan memanfaatkan properti - properti yang disediakan CSS tentunya, dimana animasi akan dibuat dengan transisi. Baiklah langsung saja kita akan buat bagaimana Cara Membuat Animasi Label Input.

Silahkan kalian buat satu file index.html kemudian ketikan sintak HTML sebagai struktur sederhana dan membuat inputan yang akan dikenai animasi label.

<body>
    <form>
        <input id="input" type="text" required="">
        <label id="label" placeholder="Your Email"></label>
    </form>
</body>

Setelah membuat elemen inputan dan label seperti diatas, langkah selanjutnya adalah membuat animasi pada inputannya. Silahkan ketikan sintak CSS berikut.

<style>
    #input {
        box-sizing: border-box;
        width: 20%;
        height: calc(4em + 1px);
        margin: 0 0 1em;
        padding: 1em;
        border: 1px solid #ccc;
        background: #fff;
        resize: none;
        outline: none;
    }
    #input[required]:focus {
        border-color: #00bafa;
    }
    #input[required]:focus + #label:before {
        color: #00bafa;
    }
    #input[required]:focus + #label:before,
    #input[required]:valid + #label:before {
        transition-duration: .2s;
        transform: translate(0, -1.5em) scale(0.9, 0.9);
    }
    #input[required]:invalid + #label[alt]:before {
        content: attr(alt);
    }
    #input[required] + #label {
        display: block;
        pointer-events: none;
        line-height: 1em;
        margin-top: calc(-3em - 2px);
        margin-bottom: calc((3em - 1em) + 2px);
    }
    #input[required] + #label:before {
        content: attr(placeholder);
        display: inline-block;
        margin: 0 calc(1em + 2px);
        padding: 0 2px;
        color: #898989;
        white-space: nowrap;
        transition: 0.3s ease-in-out;
        background-image: linear-gradient(to bottom, #fff, #fff);
        background-size: 100% 5px;
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

Setelah mengetikan semua sintak HTML dan CSS, silahkan simpan filenya kemudian kalian bisa melihat hasil akhirnya pada browser masing - masing, dan lihat apakah animasi label pada input yang kalian buat berhasil atau tidak.
Baiklah, cukup sekian tutorial bagaimana Cara Membuat Animasi Label Input, semoga tutorial animasi ini bermanfaat selamat mencoba dan sampai jumpa ditutorial DUMET School selanjutnya.

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More