{"id":2791,"date":"2025-07-14T12:14:14","date_gmt":"2025-07-14T12:14:14","guid":{"rendered":"https:\/\/digidesain.com\/blog\/?p=2791"},"modified":"2025-07-14T12:14:15","modified_gmt":"2025-07-14T12:14:15","slug":"tutorial-membuat-animasi-dengan-css","status":"publish","type":"post","link":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/","title":{"rendered":"Tutorial Membuat Animasi Dengan CSS"},"content":{"rendered":"\n<p>Tutorial membuat animasi dengan CSS, Di dunia pengembangan web modern, tampilan yang dinamis dan interaktif jadi salah satu daya tarik utama. <\/p>\n\n\n\n<p>Tidak cukup hanya desain yang bagus interaksi yang halus dan responsif juga sangat menentukan kenyamanan pengguna. Nah, di sinilah animasi memainkan peran penting.<\/p>\n\n\n\n<p>Salah satu cara paling efisien dan ringan untuk membuat efek visual menarik adalah dengan menggunakan CSS. <\/p>\n\n\n\n<p>Ya, bukan JavaScript, tapi CSS! Bahkan tanpa library atau plugin tambahan, kamu bisa membuat berbagai macam animasi dari transisi halus, efek hover, sampai animasi kompleks seperti loading spinner atau animasi masuk keluar elemen.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Simak Juga : <a href=\"https:\/\/digidesain.com\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer<\/a><\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#Apa_Itu_CSS_Animation\" >Apa Itu CSS Animation?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#1_Perbedaan_Transisi_dan_Animasi_dalam_CSS\" >1. Perbedaan Transisi dan Animasi dalam CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#2_Komponen_Utama_dalam_CSS_Animation\" >2. Komponen Utama dalam CSS Animation<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#Tutorial_Membuat_Animasi_Sederhana_dengan_CSS\" >Tutorial Membuat Animasi Sederhana dengan CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#1_Membuat_Animasi_Bergerak_dari_Kiri_ke_Kanan\" >1. Membuat Animasi Bergerak dari Kiri ke Kanan<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#Menambahkan_Efek_Hover_dengan_Transisi\" >Menambahkan Efek Hover dengan Transisi<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#1_Membuat_Tombol_dengan_Efek_Hover_yang_Halus\" >1. Membuat Tombol dengan Efek Hover yang Halus<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#Membuat_Animasi_Looping_Berulang_secara_Otomatis\" >Membuat Animasi Looping (Berulang) secara Otomatis<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#1_Contoh_Membuat_Spinner_Loading\" >1. Contoh Membuat Spinner Loading<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#Tips_Meningkatkan_Animasi_CSS_agar_Lebih_Smooth\" >Tips Meningkatkan Animasi CSS agar Lebih Smooth<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#1_Gunakan_Timing_Function_dengan_Bijak\" >1. Gunakan Timing Function dengan Bijak<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#2_Hindari_Terlalu_Banyak_Animasi_Sekaligus\" >2. Hindari Terlalu Banyak Animasi Sekaligus<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Apa_Itu_CSS_Animation\"><\/span>Apa Itu CSS Animation?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sebelum mulai praktik, penting untuk memahami dulu dasar dari animasi dalam CSS. Pada dasarnya, animasi CSS memungkinkan kamu mengubah properti dari suatu elemen secara bertahap. Efek ini bisa berjalan otomatis atau dipicu oleh aksi pengguna, seperti hover atau klik.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Perbedaan_Transisi_dan_Animasi_dalam_CSS\"><\/span>1. Perbedaan Transisi dan Animasi dalam CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Sering kali orang bingung membedakan antara transition dan animation dalam CSS. Transisi hanya memungkinkan perubahan dari satu kondisi ke kondisi lain, dan biasanya dipicu oleh interaksi seperti hover. Sedangkan animasi bisa lebih kompleks, karena kamu bisa mengatur banyak frame (keyframes), durasi, delay, dan pengulangan tanpa harus ada interaksi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Komponen_Utama_dalam_CSS_Animation\"><\/span>2. Komponen Utama dalam CSS Animation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dalam tutorial membuat animasi dengan CSS, kamu akan sering bertemu dengan istilah seperti @keyframes, animation-name, animation-duration, animation-delay, dan animation-iteration-count. Semua properti ini bekerja bersama untuk mengontrol bagaimana animasi akan tampil di layar.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tutorial_Membuat_Animasi_Sederhana_dengan_CSS\"><\/span>Tutorial Membuat Animasi Sederhana dengan CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sekarang kita mulai masuk ke praktik langsung. Di tahap ini, kamu akan belajar cara membuat animasi dasar, seperti memindahkan elemen dari kiri ke kanan atau mengubah warna latar belakang secara halus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Membuat_Animasi_Bergerak_dari_Kiri_ke_Kanan\"><\/span>1. Membuat Animasi Bergerak dari Kiri ke Kanan<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Misalkan kamu punya sebuah kotak div yang ingin kamu buat bergerak dari sisi kiri layar ke sisi kanan. Langkah pertama adalah mendefinisikan keyframes terlebih dahulu. Di dalam keyframes, kamu mendefinisikan titik awal dan titik akhir dari properti yang ingin dianimasikan. Kemudian kamu terapkan animasi tersebut ke elemen yang dimaksud dengan properti animation.<\/p>\n\n\n\n<p>Kamu bisa menggunakan kode berikut sebagai contoh dasar:<\/p>\n\n\n\n<p class=\"has-cyan-bluish-gray-background-color has-background\">@keyframes slideRight {<br><br>\u00a0\u00a0from {<br><br>\u00a0\u00a0\u00a0\u00a0transform: translateX(0);<br><br>\u00a0\u00a0}<br><br>\u00a0\u00a0to {<br><br>\u00a0\u00a0\u00a0\u00a0transform: translateX(300px);<br><br>}<br><br>}<br><br>.box {<br><br>\u00a0\u00a0width: 100px;<br><br>\u00a0\u00a0height: 100px;<br><br>\u00a0\u00a0background-color: tomato;<br><br>\u00a0\u00a0animation: slideRight 2s ease-in-out forwards;<br><br>}<\/p>\n\n\n\n<p>Kode di atas akan membuat elemen dengan class .box&nbsp;bergerak sejauh 300px ke kanan selama 2 detik.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Menambahkan_Efek_Hover_dengan_Transisi\"><\/span>Menambahkan Efek Hover dengan Transisi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Selain animasi otomatis, kamu juga bisa menambahkan animasi saat pengguna melakukan aksi tertentu, misalnya saat mouse diarahkan ke elemen. Ini biasanya digunakan untuk tombol atau gambar agar terlihat lebih responsif dan menarik.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Membuat_Tombol_dengan_Efek_Hover_yang_Halus\"><\/span>1. Membuat Tombol dengan Efek Hover yang Halus<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Kamu bisa mengatur efek hover menggunakan transition. Misalnya, kamu ingin membuat tombol berubah warna dan sedikit membesar saat disentuh kursor. Caranya cukup dengan menetapkan properti transition&nbsp;di elemen utama, dan mendesain perubahan yang terjadi saat hover.<\/p>\n\n\n\n<p>Contoh kode sederhananya seperti ini:<\/p>\n\n\n\n<p>.button {<\/p>\n\n\n\n<p>&nbsp;&nbsp;background-color: #008CBA;<\/p>\n\n\n\n<p>&nbsp;&nbsp;padding: 10px 20px;<\/p>\n\n\n\n<p>&nbsp;&nbsp;color: white;<\/p>\n\n\n\n<p>&nbsp;&nbsp;border: none;<\/p>\n\n\n\n<p>&nbsp;&nbsp;transition: all 0.3s ease;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.button:hover {<\/p>\n\n\n\n<p>&nbsp;&nbsp;background-color: #005f73;<\/p>\n\n\n\n<p>&nbsp;&nbsp;transform: scale(1.1);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Dengan kode di atas, tombol akan berubah warna dan sedikit membesar secara halus saat disentuh. Ini memberikan kesan profesional dan modern pada website kamu.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Membuat_Animasi_Looping_Berulang_secara_Otomatis\"><\/span>Membuat Animasi Looping (Berulang) secara Otomatis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Dalam beberapa kasus, kamu mungkin ingin membuat animasi yang berjalan terus-menerus, seperti loading spinner, animasi teks berjalan, atau elemen bergerak konstan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Contoh_Membuat_Spinner_Loading\"><\/span>1. Contoh Membuat Spinner Loading<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Kamu bisa membuat animasi loading sederhana hanya dengan CSS. Misalnya, membuat lingkaran berputar tanpa JavaScript sama sekali. Triknya adalah menggunakan transformasi rotate()&nbsp;dalam keyframes dan mengatur animation-iteration-count&nbsp;ke infinite.<\/p>\n\n\n\n<p>Berikut contoh implementasinya:<\/p>\n\n\n\n<p>@keyframes spin {<\/p>\n\n\n\n<p>&nbsp;&nbsp;0% {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(0deg);<\/p>\n\n\n\n<p>&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&nbsp;&nbsp;100% {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(360deg);<\/p>\n\n\n\n<p>&nbsp;&nbsp;}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.loader {<\/p>\n\n\n\n<p>&nbsp;&nbsp;border: 8px solid #f3f3f3;<\/p>\n\n\n\n<p>&nbsp;&nbsp;border-top: 8px solid #3498db;<\/p>\n\n\n\n<p>&nbsp;&nbsp;border-radius: 50%;<\/p>\n\n\n\n<p>&nbsp;&nbsp;width: 60px;<\/p>\n\n\n\n<p>&nbsp;&nbsp;height: 60px;<\/p>\n\n\n\n<p>&nbsp;&nbsp;animation: spin 1s linear infinite;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Dengan kode ini, elemen .loader&nbsp;akan berputar tanpa henti, mirip seperti animasi loading pada aplikasi profesional.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tips_Meningkatkan_Animasi_CSS_agar_Lebih_Smooth\"><\/span>Tips Meningkatkan Animasi CSS agar Lebih Smooth<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Menggunakan CSS animation memang praktis, tapi agar hasilnya lebih profesional, ada beberapa hal yang perlu diperhatikan. Ini akan membuat animasi terasa natural dan tidak terlalu \u201crobotik\u201d.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Gunakan_Timing_Function_dengan_Bijak\"><\/span>1. Gunakan Timing Function dengan Bijak<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Timing function seperti ease, linear, ease-in, dan ease-out\u00a0menentukan bagaimana kecepatan animasi berubah selama durasi animasi. Efek ease-in-out\u00a0biasanya paling banyak digunakan karena memberikan efek gerakan yang lebih natural mulai perlahan, cepat di tengah, lalu pelan lagi di akhir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Hindari_Terlalu_Banyak_Animasi_Sekaligus\"><\/span>2. Hindari Terlalu Banyak Animasi Sekaligus<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Terlalu banyak animasi pada satu halaman bisa membuat pengguna bingung dan bahkan memperlambat performa situs. Fokuslah pada animasi yang benar-benar menambah nilai interaktif atau informatif dari elemen tersebut. Gunakan animasi sebagai alat bantu, bukan hanya dekorasi.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span>Kesimpulan<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Melalui tutorial membuat animasi dengan CSS\u00a0ini, kamu sudah mengenal dasar-dasar dari pembuatan animasi di web tanpa JavaScript. Mulai dari membuat elemen bergerak, mengatur efek hover, hingga menciptakan animasi berulang seperti spinner semuanya bisa dilakukan hanya dengan kode CSS.<\/p>\n\n\n\n<p>Keunggulan animasi CSS adalah kemudahan, kecepatan, dan keringanan. Cocok untuk digunakan dalam berbagai proyek web, baik statis maupun dinamis. Jika kamu baru mulai belajar web development atau ingin mempercantik tampilan situsmu, animasi CSS bisa jadi langkah awal yang tepat dan menyenangkan.<\/p>\n\n\n\n<p>Jangan ragu untuk berlatih dan mencoba berbagai efek lain. Dunia CSS animation sangat luas dan penuh dengan kemungkinan kreatif yang tak terbatas. Selamat mencoba!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial membuat animasi dengan CSS, Di dunia pengembangan web modern, tampilan yang dinamis dan interaktif jadi salah satu daya tarik utama. Tidak cukup hanya desain yang bagus interaksi yang halus dan responsif juga sangat menentukan kenyamanan pengguna. Nah, di sinilah animasi memainkan peran penting. Salah satu cara paling efisien dan ringan untuk membuat efek visual [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2792,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","inline_featured_image":false,"footnotes":""},"categories":[35],"tags":[],"class_list":["post-2791","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial Membuat Animasi Dengan CSS - digidesain<\/title>\n<meta name=\"description\" content=\"Melalui tutorial membuat animasi dengan CSS ini, kamu sudah mengenal dasar-dasar dari pembuatan animasi di web tanpa JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial Membuat Animasi Dengan CSS - digidesain\" \/>\n<meta property=\"og:description\" content=\"Melalui tutorial membuat animasi dengan CSS ini, kamu sudah mengenal dasar-dasar dari pembuatan animasi di web tanpa JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/\" \/>\n<meta property=\"og:site_name\" content=\"digidesain\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-14T12:14:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-14T12:14:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-19.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/digidesain.com\/blog\/#\/schema\/person\/d280cd31dcb72556d28bb5e5d800edc7\"},\"headline\":\"Tutorial Membuat Animasi Dengan CSS\",\"datePublished\":\"2025-07-14T12:14:14+00:00\",\"dateModified\":\"2025-07-14T12:14:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/\"},\"wordCount\":885,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/digidesain.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-19.png\",\"articleSection\":[\"Web Developer\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/\",\"url\":\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/\",\"name\":\"Tutorial Membuat Animasi Dengan CSS - digidesain\",\"isPartOf\":{\"@id\":\"https:\/\/digidesain.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-19.png\",\"datePublished\":\"2025-07-14T12:14:14+00:00\",\"dateModified\":\"2025-07-14T12:14:15+00:00\",\"description\":\"Melalui tutorial membuat animasi dengan CSS ini, kamu sudah mengenal dasar-dasar dari pembuatan animasi di web tanpa JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#primaryimage\",\"url\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-19.png\",\"contentUrl\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-19.png\",\"width\":600,\"height\":400,\"caption\":\"Tutorial Membuat Animasi Dengan CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digidesain.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial Membuat Animasi Dengan CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digidesain.com\/blog\/#website\",\"url\":\"https:\/\/digidesain.com\/blog\/\",\"name\":\"digidesain\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/digidesain.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digidesain.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/digidesain.com\/blog\/#organization\",\"name\":\"digidesain\",\"url\":\"https:\/\/digidesain.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/digidesain.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-29-removebg-preview.png\",\"contentUrl\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-29-removebg-preview.png\",\"width\":821,\"height\":304,\"caption\":\"digidesain\"},\"image\":{\"@id\":\"https:\/\/digidesain.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/digidesain.com\/blog\/#\/schema\/person\/d280cd31dcb72556d28bb5e5d800edc7\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/digidesain.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/digidesain.com\"],\"url\":\"https:\/\/digidesain.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial Membuat Animasi Dengan CSS - digidesain","description":"Melalui tutorial membuat animasi dengan CSS ini, kamu sudah mengenal dasar-dasar dari pembuatan animasi di web tanpa JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial Membuat Animasi Dengan CSS - digidesain","og_description":"Melalui tutorial membuat animasi dengan CSS ini, kamu sudah mengenal dasar-dasar dari pembuatan animasi di web tanpa JavaScript.","og_url":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/","og_site_name":"digidesain","article_published_time":"2025-07-14T12:14:14+00:00","article_modified_time":"2025-07-14T12:14:15+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-19.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#article","isPartOf":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/"},"author":{"name":"admin","@id":"https:\/\/digidesain.com\/blog\/#\/schema\/person\/d280cd31dcb72556d28bb5e5d800edc7"},"headline":"Tutorial Membuat Animasi Dengan CSS","datePublished":"2025-07-14T12:14:14+00:00","dateModified":"2025-07-14T12:14:15+00:00","mainEntityOfPage":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/"},"wordCount":885,"commentCount":0,"publisher":{"@id":"https:\/\/digidesain.com\/blog\/#organization"},"image":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#primaryimage"},"thumbnailUrl":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-19.png","articleSection":["Web Developer"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/","url":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/","name":"Tutorial Membuat Animasi Dengan CSS - digidesain","isPartOf":{"@id":"https:\/\/digidesain.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#primaryimage"},"image":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#primaryimage"},"thumbnailUrl":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-19.png","datePublished":"2025-07-14T12:14:14+00:00","dateModified":"2025-07-14T12:14:15+00:00","description":"Melalui tutorial membuat animasi dengan CSS ini, kamu sudah mengenal dasar-dasar dari pembuatan animasi di web tanpa JavaScript.","breadcrumb":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#primaryimage","url":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-19.png","contentUrl":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-19.png","width":600,"height":400,"caption":"Tutorial Membuat Animasi Dengan CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/digidesain.com\/blog\/tutorial-membuat-animasi-dengan-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digidesain.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial Membuat Animasi Dengan CSS"}]},{"@type":"WebSite","@id":"https:\/\/digidesain.com\/blog\/#website","url":"https:\/\/digidesain.com\/blog\/","name":"digidesain","description":"","publisher":{"@id":"https:\/\/digidesain.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digidesain.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/digidesain.com\/blog\/#organization","name":"digidesain","url":"https:\/\/digidesain.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digidesain.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-29-removebg-preview.png","contentUrl":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-29-removebg-preview.png","width":821,"height":304,"caption":"digidesain"},"image":{"@id":"https:\/\/digidesain.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/digidesain.com\/blog\/#\/schema\/person\/d280cd31dcb72556d28bb5e5d800edc7","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digidesain.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/digidesain.com"],"url":"https:\/\/digidesain.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/posts\/2791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/comments?post=2791"}],"version-history":[{"count":1,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/posts\/2791\/revisions"}],"predecessor-version":[{"id":2793,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/posts\/2791\/revisions\/2793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/media\/2792"}],"wp:attachment":[{"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/media?parent=2791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/categories?post=2791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/tags?post=2791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}