{"id":8820,"date":"2024-01-21T17:55:00","date_gmt":"2024-01-21T17:55:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8820"},"modified":"2024-01-22T15:56:17","modified_gmt":"2024-01-22T10:56:17","slug":"css-text-reveal-animation","status":"publish","type":"post","link":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/","title":{"rendered":"CSS Text Reveal Animation"},"content":{"rendered":"<p>This pure CSS code snippet helps you to create text reveal animation. It uses CSS3 to gradually reveal and animate text, bringing your content to life. The core method, &#8220;reveal,&#8221; animates text elements, making them appear and disappear seamlessly. This code is perfect for adding eye-catching animations to your website&#8217;s text content.<\/p>\n<p>You can use this code in your website&#8217;s landing page to engage visitors with visually appealing text animations. It enhances user experience by creating eye-catching and interactive content. This code is a simple way to make your website more engaging and memorable.<\/p>\n<h2>How to Create CSS Text Reveal Animation<\/h2>\n<p>1. First, you need to set up your HTML structure. You can place your text inside HTML elements that you want to animate. In the provided code, we have used <code>&lt;div&gt;<\/code> and <code>&lt;span&gt;<\/code> elements to enclose our text.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;div class=\"f-div\"&gt;Escape &lt;\/div&gt; \r\n&lt;div class=\"l-div\"&gt; \r\n  &lt;span&gt; into amazing experiences&lt;\/span&gt;\r\n&lt;\/div&gt;\r\n\r\n\r\n&lt;p&gt;a css3 animation demo&lt;\/p&gt;\r\n<\/pre>\n<p>2. Now, it&#8217;s time to incorporate the CSS code into your project. The CSS code contains keyframes and styles necessary for the animations. You can either link to an external CSS file or include it within a <code>&lt;style&gt;<\/code> tag in your HTML document.<\/p>\n<pre class=\"prettyprint linenums lang-css\">@import url('https:\/\/fonts.googleapis.com\/css?family=Roboto:300');\r\n\r\nbody{\r\n  display: block !important;\r\n  text-align:center;\r\n  background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%) !important;\r\n  color:#555;\r\n  font-family:'Roboto';\r\n  font-weight:300;\r\n  font-size:32px;\r\n  height:100vh;\r\n  overflow:hidden;\r\n  -webkit-backface-visibility: hidden;\r\n  -webkit-perspective: 1000;\r\n  -webkit-transform: translate3d(0,0,0);\r\n}\r\n\r\ndiv {\r\n  display:inline-block;\r\n  overflow:hidden;\r\n  white-space:nowrap;\r\n}\r\n\r\n.f-div{    \r\n  animation: showup 7s infinite;\r\n}\r\n\r\n.l-div {\r\n  width:0px;\r\n  animation: reveal 7s infinite;\r\n}\r\n\r\n.l-div span {\r\n  margin-left:-355px;\r\n  animation: slidein 7s infinite;\r\n}\r\n\r\n@keyframes showup {\r\n    0% {opacity:0;}\r\n    20% {opacity:1;}\r\n    80% {opacity:1;}\r\n    100% {opacity:0;}\r\n}\r\n\r\n@keyframes slidein {\r\n    0% { margin-left:-800px; }\r\n    20% { margin-left:-800px; }\r\n    35% { margin-left:0px; }\r\n    100% { margin-left:0px; }\r\n}\r\n\r\n@keyframes reveal {\r\n    0% {opacity:0;width:0px;}\r\n    20% {opacity:1;width:0px;}\r\n    30% {width:355px;}\r\n    80% {opacity:1;}\r\n    100% {opacity:0;width:355px;}\r\n}\r\n\r\n\r\np {\r\n  font-size:12px;\r\n  color:#999;\r\n  margin-top:200px;\r\n}<\/pre>\n<p>You can further customize the animations by modifying the CSS code. Adjust the animation durations, delays, or colors to match your website&#8217;s style and preferences. Experiment and make it uniquely yours!<\/p>\n<p>That&#8217;s all! hopefully, you have successfully created Text Reveal Animation using CSS. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This pure CSS code snippet helps you to create text reveal animation. It uses CSS3 to gradually reveal and animate&#8230;<\/p>\n","protected":false},"author":1,"featured_media":8834,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[97],"tags":[],"class_list":["post-8820","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-text-input"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Text Reveal Animation &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a CSS Text Reveal Animation. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Text Reveal Animation &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a CSS Text Reveal Animation. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-21T17:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:56:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/CSS-Text-Reveal-Animation.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"CSS Text Reveal Animation\",\"datePublished\":\"2024-01-21T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:56:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/\"},\"wordCount\":241,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/CSS-Text-Reveal-Animation.png\",\"articleSection\":[\"Text &amp; Input\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/\",\"url\":\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/\",\"name\":\"CSS Text Reveal Animation &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/CSS-Text-Reveal-Animation.png\",\"datePublished\":\"2024-01-21T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:56:17+00:00\",\"description\":\"Here is a free code snippet to create a CSS Text Reveal Animation. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/CSS-Text-Reveal-Animation.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/CSS-Text-Reveal-Animation.png\",\"width\":1280,\"height\":960,\"caption\":\"CSS Text Reveal Animation\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Text &amp; Input\",\"item\":\"https:\/\/codehim.com\/category\/text-input\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Text Reveal Animation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Text Reveal Animation &#8212; CodeHim","description":"Here is a free code snippet to create a CSS Text Reveal Animation. You can view demo and download the source code.","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:\/\/codehim.com\/text-input\/css-text-reveal-animation\/","og_locale":"en_US","og_type":"article","og_title":"CSS Text Reveal Animation &#8212; CodeHim","og_description":"Here is a free code snippet to create a CSS Text Reveal Animation. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-21T17:55:00+00:00","article_modified_time":"2024-01-22T10:56:17+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/CSS-Text-Reveal-Animation.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"CSS Text Reveal Animation","datePublished":"2024-01-21T17:55:00+00:00","dateModified":"2024-01-22T10:56:17+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/"},"wordCount":241,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/CSS-Text-Reveal-Animation.png","articleSection":["Text &amp; Input"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/","url":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/","name":"CSS Text Reveal Animation &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/CSS-Text-Reveal-Animation.png","datePublished":"2024-01-21T17:55:00+00:00","dateModified":"2024-01-22T10:56:17+00:00","description":"Here is a free code snippet to create a CSS Text Reveal Animation. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/CSS-Text-Reveal-Animation.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/CSS-Text-Reveal-Animation.png","width":1280,"height":960,"caption":"CSS Text Reveal Animation"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/text-input\/css-text-reveal-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Text &amp; Input","item":"https:\/\/codehim.com\/category\/text-input\/"},{"@type":"ListItem","position":3,"name":"CSS Text Reveal Animation"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1497,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=8820"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8820\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8834"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}