Tutorial Membuat Animasi Tulisan Menggunakan CSS

Tags: css | html

Last updated Jul 26, 2023

Menerapkan Desain Grid dengan CSS Grid dan Flexbox

Salah satu yang dapat dilakukan CSS adalah membuat tampilan lebih menarik, tapi ada juga yang memanfaatkannya untuk membuat animasi. Animasi yang dibuat sangatlah banyak, bisa kalian cek di codepen.io atau kalian bisa temukan ditempat lainnya.

Saya sempat belajar animasi tentang tulisan bergerak dan menurut saya menarik sekali. Hingga akhirnya saya memutuskan untuk menulis tutorialnya untuk dicoba oleh kalian. Sangat simpel dan menarik menurut saya. Hasilnya anda bisa lihat disini

Karena web ini bertujuan untuk memberikan tutorial dan belum terlalu canggih hingga bisa run and try seperti w3schools. Jadi mohon maaf cuma bisa berikan contoh hasilnya saja di tab baru.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar CSS Animasi</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display-swap">
    <link rel="stylesheet" href="animasi.css">
</head>
<body>
    <div class="wrapper">
        <p>Pemograman itu</p>
        <div class="words">
            <span>mudah</span>
            <span>sulit</span>
            <span>keras</span>
            <span>candu</span>
            <span>indah</span>
        </div>
    </div>
</body>
</html>
Ini adalah kerangkanya berupa HTML dan kita akan tambahkan sedikit animasi yang disimpan di file animasi.css. 
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    font-size: 45px;
    font-weight: 500;
}

body{
    background-color: #0efcd8;
    height: 100vh;
    display: grid;
    place-items: center;
}
.wrapper{
    box-sizing: content-box;
    background-color: #ffffff;
    height: 70px;
    padding: 50px 30px;
    display: flex;
    border-radius: 8px;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2);
}
.words{
    overflow: hidden;
}
span{
    display: block;
    height: 100%;
    color: #0efcd8;
    padding-left: 10px;
    animation: spin_words 6s infinite;
}
@keyframes spin_words{
    10%{
        transform: translateY(-112%);
    }
    25%{
        transform: translateY(-100%);
    }
    35%{
        transform: translateY(-212%);
    }
    50%{
        transform: translateY(-200%);
    }
    60%{
        transform: translateY(-312%);
    }
    75%{
        transform: translateY(-300%);
    }
    85%{
        transform: translateY(-412%);
    }
    100%{
        transform: translateY(-400%);
    }
}
File animasi.css harus disimpan satu folder dan sejajar dengan file htmlnya. Karena kita memanggilnya secara sejajar. 
Anda dapat mempelajari berbagai hal pada website ini. Jika anda ingin mempelajari hal lain diluar teknologi, kalian bisa melihat kategori belajar apa aja. Terima kasih!

Popular

Google Ngambek, Konversi USD ke IDR Tidaklah Tampil Lagi!

Sebagai seorang freelancer yang sering berurusan dengan konversi mata uang, tentunya kita selalu bergantung pada informasi yang akurat. Namun, baru-baru ini, ada kejadian menarik yang mengguncang para freelancer, khususnya yang sering memantau nilai tukar USD ke IDR....

Samsung Galaxy S25 dan Apa Saja Yang Perlu Anda Ketahui

Hai teman-teman! Semakin dekat nih dengan acara Galaxy Unpacked tanggal 23 Januari, bocoran tentang Galaxy S25, S25+, dan S25 Ultra semakin bertebaran. Sekarang, kita sudah mulai mendapatkan gambaran yang lebih jelas soal spesifikasi dan fitur dari unggulan premium...

Tutorial Cypress Pemula

Jadi, kali ini saya baru saja nyobain salah satu framework automation testing namanya Cypress. Kalo yang udah pernah pake selenium, tugasnya ini mirip - mirip cuma beda bahasa pemograman aja kali ya. Setelah cobain, saya jadi pengen bikin tutorial Cypress untuk...

Install dan Konfigurasi Drupal

Jadi, pada topik Install dan Konfigurasi Drupal, kita bisa install menggunakan berbagai macam cara ya. Untuk install dan konfigurasi drupal di lokal, kalian bisa memakai XAMPP, LAMP, MAMP karena platform tersebut sudah menyertakan apachenya. Instalasi Drupal Unduh...

Perkenalan Drupal

Halo teman - teman, saat ini saya ingin perkenalan drupal dikarenakan pada bulan september saya sudah mendapaktan sertifikat Drupal dikarenakan kebutuhan kantor. Jadi saya ingin berbagi skill yang telah saya pelajari, semoga saja bisa bermanfaat untuk kalian semua....

Password Wifi McD Terbaru 2024

Di era digital yang serba terhubung, internet telah menjadi kebutuhan mendasar bagi banyak orang. Dari mencari informasi, bekerja secara remote, hingga berkomunikasi dengan orang terdekat, semuanya bergantung pada koneksi internet yang stabil. Namun, tidak semua orang...

Menerapkan Desain Grid dengan CSS Grid dan Flexbox

Desain grid dalam konteks web development merujuk pada penggunaan struktur grid 2 dimensi untuk menyusun dan menata elemen-elemen di halaman web. Hal ini memungkinkan pembagian tata letak menjadi baris dan kolom, menciptakan area yang lebih terstruktur dan...

Form Interaktif dengan Validasi Menggunakan HTML dan CSS

Dalam tutorial ini, kita akan belajar cara membuat form interaktif dengan menggunakan HTML dan CSS, serta cara menambahkan validasi sederhana. Formulir (form) merupakan salah satu elemen penting dalam pengembangan web yang memungkinkan pengguna untuk mengirimkan data....

Framework CSS Bootstrap untuk Mempercepat Pengembangan

Menggunakan framework CSS seperti Bootstrap adalah langkah yang cerdas untuk mempercepat pengembangan situs web atau aplikasi. Bootstrap adalah salah satu framework CSS yang paling populer dan banyak digunakan. Dengan menggunakan Bootstrap, Anda dapat menghemat waktu...

Menambahkan Efek Transisi dan Animasi dengan CSS

Untuk menambahkan efek transisi dan animasi menggunakan CSS, Anda dapat menggunakan properti transition untuk transisi antara perubahan nilai properti, serta @keyframes untuk membuat animasi kustom. Berikut adalah langkah-langkah umum untuk menambahkan efek transisi...

Read More

Related Posts

Learn More

About the Author

Tubagus Putra Kencana

Saya telah mengerjakan beberapa proyek dalam berbagai bahasa. Karena sebagian besar pengalaman saya, bekerja di Konsultan IT yang harus bisa menyediakan apa yang dibutuhkan client. Jika tertarik untuk memberikan proyek atau peluang kerja yang membiarkan saya tetap dirumah jangan sungkan untuk kontak di linkedin saya.