{"id":687,"date":"2023-08-22T17:05:39","date_gmt":"2023-08-22T22:05:39","guid":{"rendered":"https:\/\/forfrontend.com\/?p=687"},"modified":"2024-03-04T08:15:47","modified_gmt":"2024-03-04T13:15:47","slug":"wave-text-animation-using-css","status":"publish","type":"post","link":"https:\/\/forfrontend.com\/wave-text-animation-using-css\/","title":{"rendered":"How to Design Wave Text Animation using CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In this post, we&#8217;ll learn step by step how to design wave text animation using CSS. I got this idea from a Codepen user named \u00c1lvaro, created in <strong>NOVEMBER 27, 2021<\/strong>. Many new coders look for code snippets online. They use Codepen a lot, but sometimes they need help using the codes in their projects. A small change can mess up the whole design. There aren&#8217;t many places that help with this problem. That&#8217;s why I made this post. I want to make it easy for you to understand. Don&#8217;t forget to look at my other <strong>Codepen tutorial<\/strong> posts to learn more.<\/p>\n\n\n<div class=\"gb-container gb-container-156c5fd4 ex-post-main-box\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5787258203496599\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"fluid\"\n     data-ad-layout-key=\"-6t+ed+2i-1n-4w\"\n     data-ad-client=\"ca-pub-5787258203496599\"\n     data-ad-slot=\"2493303957\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/div>\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 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 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/forfrontend.com\/wave-text-animation-using-css\/#HTML_Structure_For_Wave_Text_Animation\" >HTML Structure For Wave Text Animation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/forfrontend.com\/wave-text-animation-using-css\/#CSS_Code_For_Wave_Text_Animation\" >CSS Code For Wave Text Animation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/forfrontend.com\/wave-text-animation-using-css\/#Related_Post\" >Related Post<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/forfrontend.com\/wave-text-animation-using-css\/#Applied_Wave_effect_on_Text\" >Applied Wave effect on Text<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"HTML_Structure_For_Wave_Text_Animation\"><\/span>HTML Structure For Wave Text Animation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In the HTML structure, the developer first creates a <code>&lt;section&gt;<\/code> element. Inside this, a <code>&lt;div&gt;<\/code> element with the class name &#8220;content&#8221; is created. Within this <code>div<\/code>, two <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#4b13f4\" class=\"has-inline-color\">&lt;h2&gt;<\/mark><\/code> elements are created with the same text &#8220;Kemi&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This structure forms the basis of our <strong>wave text animation<\/strong>. The two <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#f90505\" class=\"has-inline-color\">&lt;h2&gt;<\/mark><\/code> elements will be manipulated with CSS to create the <strong>wave effect<\/strong>.<\/p>\n\n\n<div class=\"gb-container gb-container-5c7299e8\">\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;section&gt;\n  &lt;div class=&quot;content&quot;&gt;\n    &lt;h2&gt;Kemi&lt;\/h2&gt;\n    &lt;h2&gt;Kemi&lt;\/h2&gt;\n  &lt;\/div&gt;\n&lt;\/section&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">section<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;content&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">h2<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">Kemi<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">h2<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">h2<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">Kemi<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">h2<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">section<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative\">HTML<\/span><\/div>\n\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Output:<\/strong><\/p>\n\n\n<div class=\"gb-container gb-container-a29b257e\">\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"253\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wave-text-Animation-html.jpg\" alt=\"Wave text Animation html \" class=\"wp-image-688\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wave-text-Animation-html.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wave-text-Animation-html-300x70.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wave-text-Animation-html-1024x240.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wave-text-Animation-html-768x180.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_Code_For_Wave_Text_Animation\"><\/span>CSS Code For Wave Text Animation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In the CSS, the developer starts by importing the Poppins font from Google Fonts. Next, a universal selector (<code>*<\/code>) is used to select all elements on the page. The margin and padding are set to 0 to remove any default spacing from the browser. The <code>box-sizing<\/code> property is set to <code>border-box<\/code>, which means the padding and border are included in the element&#8217;s total width and height. The <code>font-family<\/code> is set to &#8220;Poppins&#8221;, which is the font imported earlier.<\/p>\n\n\n<div class=\"gb-container gb-container-206bc432\">\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: &quot;Poppins&quot;, sans-serif;\n}\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F92672\">*<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">margin<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">padding<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">box-sizing<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">border-box<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">font-family<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E6DB74\">&quot;Poppins&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #66D9EF\">sans-serif<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#272822;color:#efefe1;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The <code>body<\/code> of the document is then styled to display its child elements in a flex layout, with a black background. The <code>min-height<\/code> is set to 100vh, which means the minimum height of the body will be the same as the height of the viewport. The <code>align-items<\/code> and <code>justify-content<\/code> properties are used to center the content vertically and horizontally.<\/p>\n\n\n<div class=\"gb-container gb-container-6cff5ee8\">\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"body {\n  display: flex;\n  background: #000;\n  min-height: 100vh;\n  align-items: center;\n  justify-content: center;\n}\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">display<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">flex<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">background<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#000<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">min-height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">vh<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">align-items<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">center<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">justify-content<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">center<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#272822;color:#efefe1;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now start the main styling. The <code>div<\/code> with the class &#8220;content&#8221; is positioned relatively, which means it will be positioned relative to its normal position. The <code>&lt;h2&gt;<\/code> elements within it are styled with a white color, a large font size, and are positioned absolutely. This means they will be positioned relative to the nearest positioned ancestor (in this case, the &#8220;content&#8221; div).<\/p>\n\n\n<div class=\"gb-container gb-container-348e5aba\">\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".content {\n  position: relative;\n}\n\n.content h2 {\n  color: #fff;\n  font-size: 8em;\n  position: absolute;\n  transform: translate(-50%, -50%);\n}\n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">.content<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">relative<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #A6E22E\">.content<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">h2<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#fff<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">font-size<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">8<\/span><span style=\"color: #F92672\">em<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">absolute<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">transform<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">translate<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">-50<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #AE81FF\">-50<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#272822;color:#efefe1;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Output:<\/strong><\/p>\n\n\n<div class=\"gb-container gb-container-9f03b1ac\">\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"324\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wavy-text-effect-1024x324.jpg\" alt=\"Wavy text effect\" class=\"wp-image-689\" style=\"width:720px;height:228px\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wavy-text-effect-1024x324.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wavy-text-effect-300x95.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wavy-text-effect-768x243.jpg 768w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wavy-text-effect.jpg 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The first <code>&lt;h2&gt;<\/code> element is styled with a transparent color and a stroke of 2px with the color #03a9f4. This is done to create an outline effect for the text. The <code>-webkit-text-stroke<\/code> property is used to specify the width and color of the text&#8217;s stroke.<\/p>\n\n\n<div class=\"gb-container gb-container-156c5fd4 ex-post-main-box\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5787258203496599\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"fluid\"\n     data-ad-layout-key=\"-6t+ed+2i-1n-4w\"\n     data-ad-client=\"ca-pub-5787258203496599\"\n     data-ad-slot=\"2493303957\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">By setting the <code>color<\/code> property to <code>transparent<\/code>, the fill color of the text is removed, leaving only the stroke visible. This creates an outline effect where the text appears as a hollow shape with a colored border. The color of the stroke is set to #03a9f4, which is a shade of light blue.<\/p>\n\n\n<div class=\"gb-container gb-container-d25c4b6c\">\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".content h2:nth-child(1) {\n  color: transparent;\n  -webkit-text-stroke: 2px #03a9f4;\n}\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">.content<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">h2<\/span><span style=\"color: #A6E22E\">:nth-child<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">1<\/span><span style=\"color: #F8F8F2\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">transparent<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">-webkit-text-stroke<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">2<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">#03a9f4<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#272822;color:#efefe1;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Output:<\/strong><\/p>\n\n\n<div class=\"gb-container gb-container-bfee2d47\">\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"736\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/IMG_20230731_093822.jpg\" alt=\"Outline effect on wavy text\" class=\"wp-image-690\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/IMG_20230731_093822.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/IMG_20230731_093822-300x204.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/IMG_20230731_093822-1024x698.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/IMG_20230731_093822-768x523.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n<\/div>\n<\/div>\n\n<section class=\"gb-container gb-container-b1dc83d0 Related_post\">\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Related_Post\"><\/span>Related Post<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/forfrontend.com\/how-to-style-custom-checkbox-css\/\" data-type=\"post\" data-id=\"25\">How to style custom checkbox CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/forfrontend.com\/css-text-animations\/\" data-type=\"post\" data-id=\"34\">20 CSS Text Animations<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/forfrontend.com\/css-pulse-animations\/\" data-type=\"post\" data-id=\"1954\">12 CSS Pulse Animations<\/a><\/li>\n<\/ul>\n\n<\/section>\n\n\n<p class=\"wp-block-paragraph\">The second <code>&lt;h2&gt;<\/code> element is styled with the color #03a9f4 and an animation named &#8220;animate&#8221; with a duration of 4s, ease-in-out timing function, and infinite iteration count.<\/p>\n\n\n<div class=\"gb-container gb-container-4082a6f9\">\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".content h2:nth-child(2) {\n  color: #03a9f4;\n  animation: animate 4s ease-in-out infinite;\n}\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #A6E22E\">.content<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">h2<\/span><span style=\"color: #A6E22E\">:nth-child<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">2<\/span><span style=\"color: #F8F8F2\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#03a9f4<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #66D9EF; font-style: italic\">animation<\/span><span style=\"color: #F8F8F2\">: animate <\/span><span style=\"color: #AE81FF\">4<\/span><span style=\"color: #F92672\">s<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">ease-in-out<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">infinite<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#272822;color:#efefe1;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#2400ff\" class=\"has-inline-color\">color<\/mark><\/code> property is set to #03a9f4, matching the stroke color of the first <code>&lt;h2&gt;<\/code> element. This creates a cohesive visual effect where the filled text appears to be the same color as the outline of the first <code>&lt;h2&gt;<\/code> element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#2812ea\" class=\"has-inline-color\">animation<\/mark> <\/code>property is a shorthand property that specifies the name of the animation (in this case, &#8220;animate&#8221;), the duration of the animation (4s), the timing function (ease-in-out), and the number of times the animation should repeat (infinite).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The &#8220;<strong>animate<\/strong>&#8221; animation is defined elsewhere in the CSS using the <code>@keyframes<\/code> rule. This animation gradually changes the <code>clip-path<\/code> property of the <code>&lt;h2&gt;<\/code> element, creating a wave-like effect.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#2812ea\" class=\"has-inline-color\">ease-in-out<\/mark><\/code> timing function means the animation starts slowly, speeds up in the middle, and then slows down again towards the end. This creates a smooth, natural-looking transition.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#2812ea\" class=\"has-inline-color\">infinite<\/mark><\/code> value means the animation will repeat indefinitely, creating a continuous wave effect.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>In summary<\/strong>, the styling of the two <code>&lt;h2&gt;<\/code> elements creates a visually striking wave text animation where the filled text appears to move within the outlined text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Output:<\/strong><\/p>\n\n\n<div class=\"gb-container gb-container-4d8bcae1\">\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wave-text-color-1024x423.jpg\" alt=\"Wave text color \" class=\"wp-image-692\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wave-text-color-1024x423.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wave-text-color-300x124.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wave-text-color-768x317.jpg 768w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/07\/Wave-text-color.jpg 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Applied_Wave_effect_on_Text\"><\/span>Applied Wave effect on Text<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#6e00ff\" class=\"has-inline-color\">@keyframes<\/mark><\/code> rule is used to create animations in CSS. Inside the <code>@keyframes<\/code>, different styles are set at different stages of the animation using percentages. The percentage represents the percentage of time that has passed in the animation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>In this case<\/strong>, the animation is named &#8220;animate&#8221; and it has three stages: 0%, 50%, and 100%.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#6e00ff\" class=\"has-inline-color\">clip-path<\/mark><\/code> property is used to specify a region of an element to display, with the rest being hidden. In this case, it&#8217;s being used to create a wave effect by defining a polygon shape that changes over the course of the animation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>At the 0% and 100%<\/strong> stages (the beginning and end of the animation), the <code>clip-path<\/code> is set to a polygon shape that starts at 45% from the top, dips slightly to 44% at 16% from the left, rises to 50% at 33% from the left, peaks at 60% at 54% from the left, dips to 52% at 100% from the left, and then extends down to 100% from the top at 100% from the left and 0% from the left.<\/p>\n\n\n<div class=\"gb-container gb-container-16f7d687\">\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"@keyframes animate {\n  0%,\n  100% {\n    clip-path: polygon(\n      0% 45%,\n      16% 44%,\n      33% 50%,\n      54% 60%,\n      70% 61%,\n      84% 59%,\n      100% 52%,\n      100% 100%,\n      0% 100%\n    );\n  }\n  50% {\n    clip-path: polygon(\n      0% 60%,\n      15% 65%,\n      34% 66%,\n      51% 62%,\n      67% 50%,\n      84% 45%,\n      100% 46%,\n      100% 100%,\n      0% 100%\n    );\n  }\n}\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F92672\">@keyframes<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FD971F; font-style: italic\">animate<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  0%,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  100% {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">clip-path<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">polygon<\/span><span style=\"color: #F8F8F2\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">45<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">16<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">44<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">33<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">50<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">54<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">60<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">70<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">61<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">84<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">59<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">52<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  50% {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #66D9EF; font-style: italic\">clip-path<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">polygon<\/span><span style=\"color: #F8F8F2\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">60<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">15<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">65<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">34<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">66<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">51<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">62<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">67<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">50<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">84<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">45<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">46<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#272822;color:#efefe1;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n<\/div>\n\n<div class=\"gb-container gb-container-2cc3521f\">\n<div class=\"gb-container gb-container-d59b7464\">\n\n<p class=\"wp-block-paragraph\">If you&#8217;re interested in downloading the source code of this article, just click the button \ud83d\udd18 below  \ud83d\udc47. It&#8217;s as simple as that!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity has-luminous-vivid-orange-to-vivid-red-gradient-background has-background is-style-default\"\/>\n\n\n<div class=\"gb-container gb-container-daaedf0a\">\n\n<a class=\"gb-button gb-button-74be6438\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/PoKMyzO\" target=\"_blank\" rel=\"noopener\"><span class=\"gb-icon\"><svg aria-hidden=\"true\" role=\"img\" height=\"1em\" width=\"1em\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill=\"currentColor\" d=\"M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z\"><\/path><\/svg><\/span><span class=\"gb-button-text\"><strong>Live Demo<\/strong><\/span><\/a>\n\n\n\n<a class=\"gb-button gb-button-6fa8120d\" href=\"https:\/\/codepen.io\/cpe\/pen\/export\/PoKMyzO\" target=\"_blank\" rel=\"noopener\"><span class=\"gb-icon\"><svg aria-hidden=\"true\" role=\"img\" height=\"1em\" width=\"1em\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill=\"currentColor\" d=\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\"><\/path><\/svg><\/span><span class=\"gb-button-text\"><strong>Download<\/strong><\/span><\/a>\n\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In this post, we&#8217;ll learn step by step how to design wave text animation using &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to Design Wave Text Animation using CSS\" class=\"read-more button\" href=\"https:\/\/forfrontend.com\/wave-text-animation-using-css\/\" aria-label=\"More on How to Design Wave Text Animation using CSS\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":698,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[55],"tags":[60,66,58,127,125,124,126],"class_list":["post-687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-text","tag-css","tag-css-animations","tag-html","tag-text-animation","tag-water-wave","tag-wave-effect","tag-wave-text","resize-featured-image"],"_links":{"self":[{"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/posts\/687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/comments?post=687"}],"version-history":[{"count":14,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/posts\/687\/revisions"}],"predecessor-version":[{"id":3342,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/posts\/687\/revisions\/3342"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/media\/698"}],"wp:attachment":[{"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/media?parent=687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/categories?post=687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/tags?post=687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}