Cara Membuat Animasi Pergantian Teks dengan CSS

Cara Membuat Animasi Pergantian Teks dengan CSS - Penerapan animasi pada halaman website menjadikan tampilan lebih menarik dan lebih hidup. Ada banyak sekali animasi yang bisa diterapkan pada halaman website dan tentu nya setiap animasi pada halaman website berbeda dan menyesuaikan dengan kebutuhan. Begiu juga dengan cara pembuatan animasi nya ada banyak cara, bisa membuat animasi dengan CSS, dengan jQuery ataupun dengan yang lain nya. Nah, pada kesempatan kali ini saya akan bagikan tutorial animasi sederhana yaitu bagaimana Cara Membuat Animasi Pergantian Teks dengan CSS. Simak langkah - langkah nya berikut ini.

Kode HTML

Langkah pertama untuk membuat animasi ini adalah membuat kerangka sederhana dan tentunya membuat elemen teks nya untuk dijadikan animasi.

<body>
    <div class="container">
       <h3>DUMET <span id="title">School.</span></h3>
    <div class="animate-text">
        <span>Kursus Website</span>
        <span>Digital Marketing</span>
        <span>Desain Grafis</span>
        <span>Kursus Terbaik</span>
        <span>Di Jakarta & Depok</span>
    </div>    
</div>
</body>

Setelah membuat elemen teks nya seperti diatas, langkah selanjutnya adalah kita akan mendesain layout dan memberikan animasi pergantian pada teks nya dengan kode CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Righteous|Courgette&display=swap');
body{
    font-family: 'Righteous', cursive;
    background: #dfe6e9;
    font-size: 120px; 
}

.container {
    text-align: center;
    display: block;
    padding-top: 200px;
}

.container h3 { 
    color: #34ace0;
    
}
#title { 
    color: #2C3A47; 
    font-size: 110px;
}

.animate-text {
    margin-top: -165px;
    margin-left: 140px;
}
.animate-text span {
    font-family: 'Courgette', cursive; 
    font-size: 50px;
    color: #cc8e35; 
}

.animate-text span:nth-child(2) { animation-delay: 3s; }
.animate-text span:nth-child(3) { animation-delay: 6s; }
.animate-text span:nth-child(4) { animation-delay: 9s; }
.animate-text span:nth-child(5) { animation-delay: 12s; }

.animate-text span {
    position: absolute;
    opacity: 0;
    overflow: hidden;
    animation: animate 30s linear infinite 0s;
}

@-webkit-keyframes animate {
    0%  { opacity: 0; }
    2%  { opacity: 0; -webkit-transform: translateY(-30px); }
    5%  { opacity: 1; -webkit-transform: translateY(0px); }
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
}

Langkah selanjutnya, setelah mengetikan semua kode HTML dan CSS diatas silahkan simpan file nya dengan nama index.html kemduian untuk melihat hasilnya buka pada browser.

Baiklah, cukup sekian tutorial bagaimana Cara Membuat Animasi Pergantian Teks dengan CSS semoga tutorial ini bisa bermanfaat, selamat mencoba dan sampai jumpa lagi di tutorial selanjutnya :)

18 Juli 2019

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