Membuat Animasi Teks Bergerak dengan CSS - Seotechman
Home Bloggings Css Tutorial Membuat Animasi Teks Bergerak dengan CSS

Membuat Animasi Teks Bergerak dengan CSS

Ditulis oleh Rabu, 30 Januari 2019 Tambah Komentar
Membuat Animasi Teks Bergerak dengan Css

Seotechman.com, Bogor 30/01/2019. Pada tutorial sebelumnya sudah saya jelaskan cara membuat animasi shake pada image dan button. Sama halnya pun dengan tutorial yang akan saya bagikan pada kesempatan ini, hanya saja tutorial ini agak sedikit berbeda dengan yang sebelumnya.

Apa Saja Perbedaannya?

Perbedaanya:
Jika ditutorial yang sebelumnya animasi tersebut harus di klik terlebih dahulu baru bisa bergerak. Namun berbeda dengan pada tutorial kali ini, dimana tutorial ini akan menyuguhkan sebuah animasi yang bergerak secara otomatis dengan objek yang saya ambil yaitu berupa text.

Sebelum kita lanjut, mungkin saya akan beri sedikit penjelasan tentang properti animation, dan @keyframes yang terdapat didalam CSS.

Apa Itu Keyframe?

Keyframes dapat didefinisikan sebagai langkah untuk merangkai timeline dalam animasi CSS tersebut. Kemudian kita wajib menghubungkannya dengan selector yang akan kita beri sebuah animasi. Perlu dicatat, disini kita juga mebutuhkan properti animation khusus demi mendapat dukungan pada browser.

Adapun properti animasi yang dimaksud adalah sebagai berikut:

  • -Webkit-
  • Webkit adalah properti untuk pengguna chrome atau safari.
  • -Moz-
  • Moz adalah properti untuk pengguna firefox.
  • -O-
  • Adalah properti untuk pengguna opera.
  • -ms-
  • Adalah properti untuk pengguna internet explorer.

Nah itulah sedikit penjelasan dari saya, dan mari kita lanjutkan untuk memulai pembuatan beserta tahapan-tahapannya.

Bagaimana Cara Pembuatan Animasi Pada Text?

Untuk membuat animasi text bergerak otomatis, sama halnya dengan yang sebelumnya yaitu kita hanya perlu:

  1. CSS
  2. HTML

Cara Membuat Animasi Teks Bergerak dengan CSS

Untuk langkah yang pertama adalah, sediakan atau buat CSS nya.
Sebagai Contoh: 

/* SEOTECHMAN */
h4{ animation: shake 2.5s infinite; -webkit-animation:shake 2.5s infinite; text-align:center;}
  @-webkit-keyframes shake {
    0%, 100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      background: none;
      color: #333;
      font-weight: bold;
    }

    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }
 
    20%, 40%, 60%, 80% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }
 
  @keyframes shake {
    0%, 100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
 
    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      transform: translateX(-10px);
    }
 
    20%, 40%, 60%, 80% {
      -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
      transform: translateX(10px);
    }
Pada contoh Css diatas bisa Anda lihat, disitu terdapat h4 atau sebuah tags heading untuk kita gunakan di text yang akan kita beri animasi. Jika kalian ingin menerapkannya pada title atau judul, Anda bisa rubah dengan h1 atau h2. Dan untuk animasi nya bisa Anda lihat lagi, disitu saya beri timeline dengan nilai 2.5s.

Tahap selanjutnya yaitu, kita buat HTML nya bisa Anda lihat contoh html dibawah ini: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Test Animasi</h1>
<h4>Masukan Text Disini</h4>
</body>
</html>
Anda masukan sebuah text kedalam tags heading h4 tersebut yang akan dijadikan sebagai objek.

Yang terakhir adalah simpan kedua file tersebut, lalu coba Anda akses dan lihat bagaimana hasil dari kedua file tersebut. Apakah berjalan atau tidak.

Jika kedua file tersebut digabungkan, akan terlihat seperti ini: 

/* SEOTECHMAN */
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  h4{ animation: shake 2.5s infinite; -webkit-animation:shake 2.5s infinite; text-align:center;}
  @-webkit-keyframes shake {
    0%, 100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
 
    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }
 
    20%, 40%, 60%, 80% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }
 
 
  @keyframes shake {
    0%, 100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
 
    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      transform: translateX(-10px);
    }
 
    20%, 40%, 60%, 80% {
      -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
      transform: translateX(10px);
    }
</style>
</head>
<body>
<h1>Test Animasi</h1>
<h4>Masukan Text Disini</h4>
</body>
</html>
Sampai disini bisa dikatakan kita sudah berhasil membuatnya, itupun jika dilakukan dengan benar seperti apa yang sudah saya rincikan pada langkah diatas. Bilamana kalian belum jelas bisa dibaca ulang dari awal hingga akhir.

Saya harap disetiap tutorial yang saya berikan di Blog ini, bisa bermanfaat dan bisa memberikan ilmu baru kepada para pemula.

Demikianlah sepenggal tutorial cara membuat animasi teks bergerak dengan CSS, yang sudah saya rangkum dan saya jelaskan berikut langkah pembuatannya. Akhir kata saya ucapkan, terimakasih.

Belum ada Komentar untuk "Membuat Animasi Teks Bergerak dengan CSS"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel