Cara Membuat Animasi Mengetik Teks Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Apa kabar semuanya ? ^_^

semoga sehat semua yah, dan masih semangat untuk belajar coding nya heheh ^_^

pada Tutorial sebelumnya saya sudah Membuat Animasi Dengan CSS yaitu Animasi Kompas
yang bisa anda lihat tutorial dan demonya DISINI

Nah pada kesempatan kali ini saya akan memberikan tutorial mengenai pembuatan animasi lagi yaitu Cara Membuat Animasi Mengetik Teks Dengan CSS
pada kali ini animasi yang saya buat adalah animasi teks seperti sedang di ketik
Animasi ini hanya menggunakan html dan css, oh iya animasi ini sangat cocok untuk mempercantik halaman website anda, biar gak penasaran,
Langsung saja kita praktekan, silahkan ikuti langkah-langkah di bawah ini dengan benar.

1. Membuat File HTML
seperti tutorial yang lainnya, silahkan anda buat file bernama index.html dan isikan script yang ada di bawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Animasi Mengetik Teks Dengan CSS</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
</head>
<body>
 <h1>Berikut Contoh Animasinya</h1>
 
<div class="animasi">
Semangat Yah Belajar Coding nya ^_^
</div>

</body>
</html>

Sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya hanya berupa teks biasa yang tidak ada animasinya,
agar terbentuk animasi mengetik teksnya Silahkan ikuti langkah selanjutnya

2. Membuat File CSS
Nah ini dia file penting pada tutorial kali ini, kenapa di sebut file penting, ya karena tanpa file css kita tidak akan bisa membuat animasi tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :

.animasi {
  color: #EBE3AA; 
  font-family:sans-serif;
  font-weight:lighter;
  font-size: 2em;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: keyframes 5s steps(500) infinite; 
}

@keyframes keyframes{ 
  
  from{ width: 0px;} 
  
}

silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
lihat apa yang terjadi di browsermu :D

Demikianlah Cara Membuat Animasi Mengetik Teks Dengan CSS, Sangat mudah bukan ? :D
silahkan anda coba dan anda kembangkan sesuka hati anda dan jika anda ingin melihat hasilnya atau demonya Silahkan anda buka halaman demonya di bawah ini

Demo
click to view

Mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf :D
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D