{"id":17088,"date":"2013-05-03T18:01:20","date_gmt":"2013-05-03T10:01:20","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17088"},"modified":"2024-02-21T01:30:48","modified_gmt":"2024-02-20T17:30:48","slug":"css-cubic-bezier","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/","title":{"rendered":"A Look Into: Cubic-bezier in CSS3 Transition"},"content":{"rendered":"<p><strong>CSS3 Transition<\/strong> is a fantastic feature of CSS3, enabling us to add dynamic effects to CSS properties over time. For those who know the <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-pseudo-classes\/\">basics<\/a>, it\u2019s crucial to choose the right speed or timing function for these transitions.<\/p>\n<p>There are four built-in timing functions available: <code>ease<\/code>, <code>ease-in<\/code>, <code>ease-out<\/code>, <code>ease-in-out<\/code>, and <code>linear<\/code>.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-fan-out-bounce-effect-animation\/\">Create a Fan-Out with Bounce Effect Using CSS3 Animation<\/a>\n\t\t\t\t<\/p>\n<p>However, a detail often missed about these timing functions is their foundation on the <strong>Bezier curve<\/strong>.<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/css-cubic-bezier\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  See demo <\/span><\/a><\/p>\n<h2>Understanding the Bezier Curve<\/h2>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/B%C3%A9zier_curve\">The Bezier curve<\/a> is widely used in computer graphics, especially in vector graphic editors like Adobe Illustrator or Inkscape. When you draw with the pen tool in these programs, you\u2019re using the Bezier curve, which relies on four key points as shown below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-cubic-bezier\/bezier-curve.png\" alt=\"Illustration of Bezier Curve\" width=\"500\" height=\"280\"><\/figure>\n<p>In CSS3 Transitions, we use the cubic-bezier function, which follows this format:<\/p>\n<pre>\r\n cubic-bezier(P0,P1,P2,P3);\r\n <\/pre>\n<p>It\u2019s important to remember that in the Cubic-bezier curve, each point\u2019s values must be between 0 and 1. Now, let\u2019s revisit the timing functions in CSS3 transitions and understand how they map onto the Cubic-bezier curve.<\/p>\n<p><strong>ease<\/strong> is the standard timing function in CSS3 Transitions. Its cubic-bezier equivalent looks like this:<\/p>\n<pre>\r\n cubic-bezier(0.25,0.1,0.25,1);\r\n <\/pre>\n<p><strong>linear<\/strong> keeps the animation speed consistent from start to finish. In cubic-bezier terms, it is defined as:<\/p>\n<pre>\r\n cubic-bezier(0,0,1,1);\r\n <\/pre>\n<p><strong>ease-in<\/strong> starts the animation slowly, then speeds up, maintaining a steady pace until the end. Its cubic-bezier representation is:<\/p>\n<pre>\r\n cubic-bezier(0.42, 0.0, 1.0, 1.0);\r\n <\/pre>\n<p><strong>ease-out<\/strong> works in the opposite way to ease-in, beginning at a steady and fast pace before slowing down towards the end. Its cubic-bezier formula is:<\/p>\n<pre>\r\n cubic-bezier(0.0, 0.0, 0.58, 1.0);\r\n <\/pre>\n<p><strong>ease-in-out<\/strong> combines the effects of ease-in and ease-out, starting and ending slowly with acceleration in the middle. In cubic-bezier, it is expressed as:<\/p>\n<pre>\r\n cubic-bezier(0.42, 0.0, 0.58, 1.0);\r\n <\/pre>\n<h2>Creating Custom Animation Speeds<\/h2>\n<p>With the Cubic-bezier function, creating custom animation speeds is possible. However, visualizing and intuiting these speeds isn\u2019t straightforward, making it challenging to see the speed\u2019s progression. Fortunately, we have access to a helpful tool, <a href=\"https:\/\/cubic-bezier.com\/\">cubic-bezier.com<\/a>, for this purpose.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-cubic-bezier\/cubic-bezier.com.jpg\" alt=\"Cubic-bezier.com Tool Interface\" width=\"500\"><\/figure>\n<p>Developed by <a href=\"https:\/\/lea.verou.me\">Lea Verou<\/a>, a renowned CSS expert, this tool features an interactive Bezier curve. By adjusting the curve, it instantly generates corresponding values. Additionally, it allows for the visualization of transition movements and speed comparison.<\/p>\n<p>Here\u2019s an example showcasing the <strong>cubic-bezier<\/strong> function\u2019s capability to simulate a rocket\u2019s launch speed.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-cubic-bezier\/rocket-launch.jpg\" alt=\"Rocket Launch Speed Illustration\" width=\"500\" height=\"280\"><\/figure>\n<p>Explore the demonstration and download the source code from the following links. We hope you find this tool as exciting as we do.<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/css-cubic-bezier\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  See demo <\/span><\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/css-cubic-bezier\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source code <\/span><\/a> <\/p>","protected":false},"excerpt":{"rendered":"<p>CSS3 Transition is a fantastic feature of CSS3, enabling us to add dynamic effects to CSS properties over time. For those who know the basics, it\u2019s crucial to choose the right speed or timing function for these transitions. There are four built-in timing functions available: ease, ease-in, ease-out, ease-in-out, and linear. However, a detail often&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,4501,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Cubic-bezier in CSS3 Transition<\/title>\n<meta name=\"description\" content=\"CSS3 Transition is a fantastic feature of CSS3, enabling us to add dynamic effects to CSS properties over time. For those who know the basics, it&#039;s\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look Into: Cubic-bezier in CSS3 Transition\" \/>\n<meta property=\"og:description\" content=\"CSS3 Transition is a fantastic feature of CSS3, enabling us to add dynamic effects to CSS properties over time. For those who know the basics, it&#039;s\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-03T10:01:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-20T17:30:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-cubic-bezier\/bezier-curve.png\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\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:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Look Into: Cubic-bezier in CSS3 Transition\",\"datePublished\":\"2013-05-03T10:01:20+00:00\",\"dateModified\":\"2024-02-20T17:30:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/\"},\"wordCount\":473,\"commentCount\":38,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-cubic-bezier\\\/bezier-curve.png\",\"keywords\":[\"CSS\",\"CSS Tutorials\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/\",\"name\":\"Cubic-bezier in CSS3 Transition\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-cubic-bezier\\\/bezier-curve.png\",\"datePublished\":\"2013-05-03T10:01:20+00:00\",\"dateModified\":\"2024-02-20T17:30:48+00:00\",\"description\":\"CSS3 Transition is a fantastic feature of CSS3, enabling us to add dynamic effects to CSS properties over time. For those who know the basics, it's\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-cubic-bezier\\\/bezier-curve.png\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-cubic-bezier\\\/bezier-curve.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cubic-bezier\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look Into: Cubic-bezier in CSS3 Transition\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cubic-bezier in CSS3 Transition","description":"CSS3 Transition is a fantastic feature of CSS3, enabling us to add dynamic effects to CSS properties over time. For those who know the basics, it's","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:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/","og_locale":"en_US","og_type":"article","og_title":"A Look Into: Cubic-bezier in CSS3 Transition","og_description":"CSS3 Transition is a fantastic feature of CSS3, enabling us to add dynamic effects to CSS properties over time. For those who know the basics, it's","og_url":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-05-03T10:01:20+00:00","article_modified_time":"2024-02-20T17:30:48+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-cubic-bezier\/bezier-curve.png","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Look Into: Cubic-bezier in CSS3 Transition","datePublished":"2013-05-03T10:01:20+00:00","dateModified":"2024-02-20T17:30:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/"},"wordCount":473,"commentCount":38,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-cubic-bezier\/bezier-curve.png","keywords":["CSS","CSS Tutorials","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/","url":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/","name":"Cubic-bezier in CSS3 Transition","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-cubic-bezier\/bezier-curve.png","datePublished":"2013-05-03T10:01:20+00:00","dateModified":"2024-02-20T17:30:48+00:00","description":"CSS3 Transition is a fantastic feature of CSS3, enabling us to add dynamic effects to CSS properties over time. For those who know the basics, it's","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-cubic-bezier\/bezier-curve.png","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-cubic-bezier\/bezier-curve.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-cubic-bezier\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look Into: Cubic-bezier in CSS3 Transition"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4rC","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17088"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17088\/revisions"}],"predecessor-version":[{"id":71302,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17088\/revisions\/71302"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17088"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}