Cara Membuat Animasi Slide dengan CSS

Cara Membuat Animasi Slide dengan CSS - Animasi slide merupakan suatu animasi yang mempunyai pola pergerakan atau perubahan objek dari kiri ke kanan, atas ke bawah atau sebaliknya. Pada website animasi ini banyak digunakan pada konten misalnya gambar, teks dan lain sebagainya. Ada banyak cara untuk membuat animasi slide pada website, jQuery dan CSS adalah salah satu contoh bahasa script untuk membuat animasi slide. Nah, Pada kesempatan ini saya akan bagikan tutorial membuat slide dengan memanfaatkan sintak CSS, penasaran seperti apa cara membuatnya, simak Cara Membuat Animasi Slide dengan CSS berikut ini.

Langkah 1 : Cara Membuat Animasi Slide dengan CSS

Langkah pertama untuk membuat animasi slide, kita akan buat struktur HTML sederhana terlebih dahulu untuk objek animasinya, pada kasus ini objek yang akan dijadikan animasi adalah teks, silahkan ketikan sintak HTML berikut ini.

<body>
    <span class="text dumet">DUMET</span>
    <span class="text school">School.</span>
</body>

Langkah 2 : Cara Membuat Animasi Slide dengan CSS

Langkah selanjutnya setelah membuat struktur seperti diatas, barulah kita akan desain tampilan teksnya dan juga membuat animasi slide dengan memanfaatkan properti dari CSS yaitu keyframe, untuk itu silahkan ketikan semua sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaijaan');
* {padding: 0; margin: 0;}
body {
    font-family: 'Baloo Bhaijaan', cursive;
    color: #0984e3;
      background-color:#f5f6fa;
}

.text {
    font-size: 95px;
    padding: 0 35px;
    float: left;
    margin-top: 20px;
}

.dumet {
    background-color: #0984e3;
    color: #f5f6fa;
    border-radius: 0 85px 85px 0;
}

.school {
    color: #0984e3;
}

.text {
    animation-name: slide;
    animation-duration: 4s;
}

@-webkit-keyframes slide {
    0% { opacity: 0; margin-left: -250px; }
    100% { opacity: 1; margin-left: 0; }
}

@keyframes slide {
    0% { opacity: 0; margin-left: -250px; }
    100% { opacity: 1; margin-left: 0; }
}

Setelah semua sintak HTML dan CSS diatas telah diketiak silahkan simpan filenya, kemudian buka pada browser masing - masing untuk melihat hasil akhirnya.

Baik, cukup sekian tutorial CSS mengenai bagaimana Cara Membuat Animasi Slide dengan CSS, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

12 September 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