{"id":2263,"date":"2023-02-27T14:42:53","date_gmt":"2023-02-27T07:42:53","guid":{"rendered":"https:\/\/kemazan.com\/blog\/?p=2263"},"modified":"2024-03-19T09:29:44","modified_gmt":"2024-03-19T02:29:44","slug":"contoh-animasi-css-html","status":"publish","type":"post","link":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/","title":{"rendered":"Contoh Animasi CSS HTML Keren"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Animasi CSS dan <a href=\"https:\/\/kemazan.com\/blog\/tag\/desain-grafis\/\">desain<\/a> UI website adalah cara yang efektif untuk menarik perhatian dan mebuat pengunjung <a href=\"https:\/\/kemazan.com\/blog\/go\/idch\" target=\"_blank\" rel=\"noreferrer noopener\">website<\/a> senang.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Meskipun ada beberapa cara untuk menambahkan grafik animasi ke halaman website, salah satu yang paling mudah adalah menggunakan animasi CSS yang hanya membutuhkan beberapa pengetahuan HTML dan CSS untuk membuatnya.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bagaimana cara kerja animasi CSS ?<br>Animasi CSS adalah fitur CSS yang memungkinkan Anda menganimasikan perubahan dalam satu atau beberapa style elemen. Animasi CSS tidak memerlukan kode tambahan misal javascript atau media .gif. Semuanya dibuat dengan HTML dan CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Animasi CSS sangat bagus untuk <a href=\"https:\/\/kemazan.com\/blog\/tag\/website\/\">website <\/a>yang ingin menambahkan konten dinamis dan menarik tanpa memberikan beban yang signifikan pada website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk membuatnya, Anda memerlukan tiga hal, elemen HTML untuk dianimasikan, aturan CSS untuk menghubungkan animasi pada elemen dan keyframe untuk menentukan animasi awal dan akhir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Only Css Animation #01<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"oNvEjMj\" data-user=\"hisamikurita\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/hisamikurita\/pen\/oNvEjMj\">\n  Only Css  Animation #01<\/a> by Hisami Kurita (<a href=\"https:\/\/codepen.io\/hisamikurita\">@hisamikurita<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: Hisami Kurita <br>Links: <a href=\"https:\/\/codepen.io\/hisamikurita\/pen\/oNvEjMj\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Created on: September 7, 2019<br>Made with: HTML, CSS<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. The handbook download animation<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"Epbmxo\" data-user=\"yancy\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/yancy\/pen\/Epbmxo\">\n  The handbook download animation<\/a> by Yancy Min (<a href=\"https:\/\/codepen.io\/yancy\">@yancy<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: Yancy Min<br>Links: <a href=\"https:\/\/codepen.io\/yancy\/pen\/Epbmxo\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Created on: July 29, 2018<br>Made with: HTML, CSS<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Info Cards Concept<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"gBLLxz\" data-user=\"yancy\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/yancy\/pen\/gBLLxz\">\n   Info Cards Concept<\/a> by Yancy Min (<a href=\"https:\/\/codepen.io\/yancy\">@yancy<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: Yancy Min<br>Links: <a href=\"https:\/\/codepen.io\/yancy\/pen\/gBLLxz\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Created on: October 8, 2018<br>Made with: HTML, CSS<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. CSS Animation: Time of Day<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"ELPvLM\" data-user=\"oliviale\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/oliviale\/pen\/ELPvLM\">\n  CSS Animation: Time of Day<\/a> by Olivia Ng (<a href=\"https:\/\/codepen.io\/oliviale\">@oliviale<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: Olivia Ng<br>Links: <a href=\"https:\/\/codepen.io\/oliviale\/pen\/ELPvLM\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Created on: APRIL 23, 2018<br>Made with: HTML, CSS, JS<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Cool Layout with Complex Chainable Animation<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"rLGvxr\" data-user=\"suez\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/suez\/pen\/rLGvxr\">\n  Cool Layout with Complex Chainable Animation<\/a> by Nikolay Talanov (<a href=\"https:\/\/codepen.io\/suez\">@suez<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: Nikolay Talanov<br>Links: <a href=\"https:\/\/codepen.io\/suez\/pen\/AXQaEg\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Created on: JULY 10, 2016<br>Made with: HTML, CSS, JS<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Netflix Intro Animation Pure CSS<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"mdryxPv\" data-user=\"claudio_bonfati\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/claudio_bonfati\/pen\/mdryxPv\">\n  Netflix Intro Animation Pure CSS<\/a> by Claudio Bonfati (<a href=\"https:\/\/codepen.io\/claudio_bonfati\">@claudio_bonfati<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: Claudio Bonfati<br>Links: <a href=\"https:\/\/codepen.io\/claudio_bonfati\/pen\/mdryxPv\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Created on: NOVEMBER 29, 2020<br>Made with: HTML, CSS<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Cinematic Animation | @keyframers 3.21<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"LYRmXBX\" data-user=\"keyframers\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/team\/keyframers\/pen\/LYRmXBX\">\n  Cinematic Animation | @keyframers 3.21<\/a> by @keyframers (<a href=\"https:\/\/codepen.io\/team\/keyframers\">@keyframers<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: @keyframers<br>Links: <a href=\"https:\/\/codepen.io\/team\/keyframers\/pen\/LYRmXBX\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Created on: JANUARY 6, 2021<br>Made with: HTML, CSS<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Simple Glassmorphism<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"VwKKgjG\" data-user=\"omeal\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/omeal\/pen\/VwKKgjG\">\n  Glassmorphism<\/a> by Supriya (<a href=\"https:\/\/codepen.io\/omeal\">@omeal<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: @omeal<br>Links: <a href=\"https:\/\/codepen.io\/omeal\/pen\/VwKKgjG\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Made with: HTML, CSS<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. Glassmorphism Creative Cloud App Redesign<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"ZEpxeYm\" data-user=\"TurkAysenur\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/TurkAysenur\/pen\/ZEpxeYm\">\n  Glassmorphism Creative Cloud App Redesign<\/a> by Aysenur Turk (<a href=\"https:\/\/codepen.io\/TurkAysenur\">@TurkAysenur<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: @TurkAysenur<br>Links: <a href=\"https:\/\/codepen.io\/TurkAysenur\/pen\/ZEpxeYm\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Made with: HTML, CSS, Javascript<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">10. Proximity Glow Cards<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"QWYPaax\" data-user=\"jh3y\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jh3y\/pen\/QWYPaax\">\n  Proximity Glow Cards<\/a> by Jhey (<a href=\"https:\/\/codepen.io\/jh3y\">@jh3y<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: @Jhey<br>Links: <a href=\"https:\/\/codepen.io\/jh3y\/pen\/QWYPaax\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Made with: HTML, CSS, Javascript<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">11. CSS scroll-driven scroll-snapping animations<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"BabdgjB\" data-user=\"giana\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/giana\/pen\/BabdgjB\">\n  CSS scroll-driven scroll-snapping animations<\/a> by Giana (<a href=\"https:\/\/codepen.io\/giana\">@giana<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: @Giana<br>Links: <a href=\"https:\/\/codepen.io\/giana\/pen\/BabdgjB\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Made with: HTML, CSS<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">12. Cards (gradient border)<\/h2>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"GRPVQXR\" data-user=\"dtab428\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/dtab428\/pen\/GRPVQXR\">\n  Cards (gradient border)<\/a> by Dan (<a href=\"https:\/\/codepen.io\/dtab428\">@dtab428<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Author: @Dan<br>Links: <a href=\"https:\/\/codepen.io\/dtab428\/pen\/GRPVQXR\" target=\"_blank\" rel=\"noreferrer noopener\">Source Code \/ Demo<\/a><br>Made with: HTML, CSS, Javascript<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Animasi CSS dan desain UI website adalah cara yang efektif untuk menarik perhatian dan mebuat pengunjung website senang. Meskipun ada beberapa cara untuk menambahkan grafik animasi ke halaman website, salah satu yang paling mudah adalah menggunakan animasi CSS yang hanya membutuhkan beberapa pengetahuan HTML dan CSS untuk membuatnya. Bagaimana cara kerja animasi CSS ?Animasi CSS&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2265,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[155,10],"tags":[191,190,98,193,192,120],"class_list":["post-2263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphic-design","category-tipsdesain","tag-animasi","tag-animasi-css","tag-desain-grafis","tag-html","tag-web-ui","tag-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Contoh Animasi CSS HTML Keren - Kemazan Blog<\/title>\n<meta name=\"description\" content=\"Animasi CSS dan desain UI website adalah cara yang efektif untuk menarik perhatian dan mebuat pengunjung website senang\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Contoh Animasi CSS HTML Keren - Kemazan Blog\" \/>\n<meta property=\"og:description\" content=\"Animasi CSS dan desain UI website adalah cara yang efektif untuk menarik perhatian dan mebuat pengunjung website senang\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Kemazan Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-27T07:42:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-19T02:29:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kemazan.com\/blog\/wp-content\/uploads\/2023\/02\/website_css_html_tumb.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"483\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kemazan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kemazan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/\"},\"author\":{\"name\":\"Kemazan\",\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/#\\\/schema\\\/person\\\/b0abef8c8425f74c7a490e1d2a2ef8c5\"},\"headline\":\"Contoh Animasi CSS HTML Keren\",\"datePublished\":\"2023-02-27T07:42:53+00:00\",\"dateModified\":\"2024-03-19T02:29:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/\"},\"wordCount\":473,\"publisher\":{\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/website_css_html_tumb.jpg\",\"keywords\":[\"animasi\",\"animasi css\",\"desain grafis\",\"HTML\",\"web UI\",\"website\"],\"articleSection\":[\"Graphic Design\",\"Tips desain\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/\",\"url\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/\",\"name\":\"Contoh Animasi CSS HTML Keren - Kemazan Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/website_css_html_tumb.jpg\",\"datePublished\":\"2023-02-27T07:42:53+00:00\",\"dateModified\":\"2024-03-19T02:29:44+00:00\",\"description\":\"Animasi CSS dan desain UI website adalah cara yang efektif untuk menarik perhatian dan mebuat pengunjung website senang\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/website_css_html_tumb.jpg\",\"contentUrl\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/website_css_html_tumb.jpg\",\"width\":850,\"height\":483,\"caption\":\"Contoh Animasi CSS HTML Keren\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/contoh-animasi-css-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Contoh Animasi CSS HTML Keren\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/\",\"name\":\"Kemazan Blog\",\"description\":\"Kemazan Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/#organization\",\"name\":\"Kemazan Blog\",\"url\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/Logo-14_4.webp\",\"contentUrl\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/Logo-14_4.webp\",\"width\":1024,\"height\":130,\"caption\":\"Kemazan Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/#\\\/schema\\\/person\\\/b0abef8c8425f74c7a490e1d2a2ef8c5\",\"name\":\"Kemazan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e45acea001b9c2568f7f0cdaa2ad9fad841f6788e545be6bc447da802554768d?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e45acea001b9c2568f7f0cdaa2ad9fad841f6788e545be6bc447da802554768d?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e45acea001b9c2568f7f0cdaa2ad9fad841f6788e545be6bc447da802554768d?s=96&d=retro&r=g\",\"caption\":\"Kemazan\"},\"url\":\"https:\\\/\\\/kemazan.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Contoh Animasi CSS HTML Keren - Kemazan Blog","description":"Animasi CSS dan desain UI website adalah cara yang efektif untuk menarik perhatian dan mebuat pengunjung website senang","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:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/","og_locale":"en_US","og_type":"article","og_title":"Contoh Animasi CSS HTML Keren - Kemazan Blog","og_description":"Animasi CSS dan desain UI website adalah cara yang efektif untuk menarik perhatian dan mebuat pengunjung website senang","og_url":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/","og_site_name":"Kemazan Blog","article_published_time":"2023-02-27T07:42:53+00:00","article_modified_time":"2024-03-19T02:29:44+00:00","og_image":[{"width":850,"height":483,"url":"https:\/\/kemazan.com\/blog\/wp-content\/uploads\/2023\/02\/website_css_html_tumb.jpg","type":"image\/jpeg"}],"author":"Kemazan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kemazan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/#article","isPartOf":{"@id":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/"},"author":{"name":"Kemazan","@id":"https:\/\/kemazan.com\/blog\/#\/schema\/person\/b0abef8c8425f74c7a490e1d2a2ef8c5"},"headline":"Contoh Animasi CSS HTML Keren","datePublished":"2023-02-27T07:42:53+00:00","dateModified":"2024-03-19T02:29:44+00:00","mainEntityOfPage":{"@id":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/"},"wordCount":473,"publisher":{"@id":"https:\/\/kemazan.com\/blog\/#organization"},"image":{"@id":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/kemazan.com\/blog\/wp-content\/uploads\/2023\/02\/website_css_html_tumb.jpg","keywords":["animasi","animasi css","desain grafis","HTML","web UI","website"],"articleSection":["Graphic Design","Tips desain"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/","url":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/","name":"Contoh Animasi CSS HTML Keren - Kemazan Blog","isPartOf":{"@id":"https:\/\/kemazan.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/#primaryimage"},"image":{"@id":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/kemazan.com\/blog\/wp-content\/uploads\/2023\/02\/website_css_html_tumb.jpg","datePublished":"2023-02-27T07:42:53+00:00","dateModified":"2024-03-19T02:29:44+00:00","description":"Animasi CSS dan desain UI website adalah cara yang efektif untuk menarik perhatian dan mebuat pengunjung website senang","breadcrumb":{"@id":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/#primaryimage","url":"https:\/\/kemazan.com\/blog\/wp-content\/uploads\/2023\/02\/website_css_html_tumb.jpg","contentUrl":"https:\/\/kemazan.com\/blog\/wp-content\/uploads\/2023\/02\/website_css_html_tumb.jpg","width":850,"height":483,"caption":"Contoh Animasi CSS HTML Keren"},{"@type":"BreadcrumbList","@id":"https:\/\/kemazan.com\/blog\/contoh-animasi-css-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kemazan.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Contoh Animasi CSS HTML Keren"}]},{"@type":"WebSite","@id":"https:\/\/kemazan.com\/blog\/#website","url":"https:\/\/kemazan.com\/blog\/","name":"Kemazan Blog","description":"Kemazan Blog","publisher":{"@id":"https:\/\/kemazan.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kemazan.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/kemazan.com\/blog\/#organization","name":"Kemazan Blog","url":"https:\/\/kemazan.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kemazan.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/kemazan.com\/blog\/wp-content\/uploads\/2025\/01\/Logo-14_4.webp","contentUrl":"https:\/\/kemazan.com\/blog\/wp-content\/uploads\/2025\/01\/Logo-14_4.webp","width":1024,"height":130,"caption":"Kemazan Blog"},"image":{"@id":"https:\/\/kemazan.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/kemazan.com\/blog\/#\/schema\/person\/b0abef8c8425f74c7a490e1d2a2ef8c5","name":"Kemazan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e45acea001b9c2568f7f0cdaa2ad9fad841f6788e545be6bc447da802554768d?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e45acea001b9c2568f7f0cdaa2ad9fad841f6788e545be6bc447da802554768d?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e45acea001b9c2568f7f0cdaa2ad9fad841f6788e545be6bc447da802554768d?s=96&d=retro&r=g","caption":"Kemazan"},"url":"https:\/\/kemazan.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kemazan.com\/blog\/wp-json\/wp\/v2\/posts\/2263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kemazan.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kemazan.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kemazan.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kemazan.com\/blog\/wp-json\/wp\/v2\/comments?post=2263"}],"version-history":[{"count":7,"href":"https:\/\/kemazan.com\/blog\/wp-json\/wp\/v2\/posts\/2263\/revisions"}],"predecessor-version":[{"id":3098,"href":"https:\/\/kemazan.com\/blog\/wp-json\/wp\/v2\/posts\/2263\/revisions\/3098"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kemazan.com\/blog\/wp-json\/wp\/v2\/media\/2265"}],"wp:attachment":[{"href":"https:\/\/kemazan.com\/blog\/wp-json\/wp\/v2\/media?parent=2263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kemazan.com\/blog\/wp-json\/wp\/v2\/categories?post=2263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kemazan.com\/blog\/wp-json\/wp\/v2\/tags?post=2263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}