Membuat Animasi Bergerak Pada Text Dengan Css - 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 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.
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 animation yang dimaksud adalah sebagai berikut:
1. -Webkit-
Webkit adalah properti untuk pengguna chrome atau safari.
2. -Moz-
Moz adalah properti untuk pengguna firefox.
3. -O-
Adalah properti untuk pengguna opera.
4. -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 Tersebut?
Untuk membuat animasi pada text agar bergerak otomatis, sama halnya dengan yang sebelumnya yaitu kita hanya perlu:
• Css
• Html
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);
}
Note:
Pada contoh Css diatas bisa kalian 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, kalian bisa rubah dengan h1 atau h2.
Dan untuk animasi nya bisa kalian lihat lagi, disitu saya beri timeline dengan nilai 2.5s.Tahap selanjutnya yaitu, kita buat html nya bisa kalian 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>
Yang terakhir adalah simpan kedua file tersebut, lalu coba kalian 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 dari saya tentang Membuat Animasi Bergerak Pada Text Dengan Css, dan mungkin itu saja yang dapat saya berikan untuk hari ini. Akhir kata saya ucapkan, terimakasih.
