{"id":3375,"date":"2021-02-26T08:08:41","date_gmt":"2021-02-26T08:08:41","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3375"},"modified":"2023-02-28T05:08:30","modified_gmt":"2023-02-28T05:08:30","slug":"css-tutorial-css-reveal-animation-text-and-image","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-css-reveal-animation-text-and-image\/","title":{"rendered":"CSS Tutorial &#8211; CSS Reveal Animation Text and Image"},"content":{"rendered":"<p><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> &#8211; Reveal animation is an elegant and modern effect which is perfect to reveal images and texts as well. What makes it special is that it animates a single colored box in front of the actual layer.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Untitled\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/OJZJaxQ?default-tab=result&amp;theme-id=dark\" height=\"500\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/OJZJaxQ\"><br \/>\nUntitled<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">\/\/ DEMO\r\n\r\n$color-main: #0fe4d2;\r\n$black: #202020;\r\nbody {\r\n  font-family: 'Montserrat', sans-serif;\r\n  text-align: center;\r\n}\r\n\r\ndiv {\r\n  display: inline-block;\r\n}\r\n\r\n.bigger {\r\n  margin: 0;\r\n  font-size: 60px;\r\n  font-weight: 800;\r\n  padding: 20px;\r\n  text-transform: uppercase;\r\n  color: $black;\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text {\r\n  max-width: 600px;\r\n  width: 100%;\r\n  line-height: 24px;\r\n  text-align: left;\r\n  color: #404040;\r\n  padding: 20px;\r\n  &amp;.txt-center {\r\n    text-align: center;\r\n  }\r\n  a {\r\n    color: $color-main;\r\n  }\r\n}\r\n\r\n\/\/ ANIMATION\r\n\r\n.has-animation {\r\n  position: relative;\r\n  p, img {\r\n      opacity: 0;\r\n  }\r\n  &amp;.animate-in {\r\n    p, img {\r\n      animation: textHidden 0.1s 1.1s forwards;\r\n    }\r\n    &amp;:before, &amp;:after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      right: 0;\r\n      height: 100%;\r\n      z-index: 10;\r\n    }\r\n    &amp;:before {\r\n      background-color: $color-main;\r\n    }\r\n    &amp;:after {\r\n      background-color: $black;\r\n      animation-delay: .5s;\r\n    }\r\n  }\r\n  &amp;.animation-ltr.animate-in {\r\n    &amp;:before {\r\n      animation: revealLTR 1.8s ease;\r\n    }\r\n    &amp;:after {\r\n      animation: revealLTR 1s .6s ease;\r\n    }\r\n  }\r\n  &amp;.animation-rtl.animate-in {\r\n    &amp;:before {\r\n      animation: revealRTL 1.8s ease;\r\n    }\r\n    &amp;:after {\r\n      animation: revealRTL 1s .6s ease;\r\n    }\r\n  }\r\n}\r\n\r\n@keyframes revealRTL {\r\n  0%{\r\n    width: 0;\r\n    right: 0;\r\n  }\r\n  65%{\r\n    width: 100%;\r\n    right: 0;\r\n  }\r\n  100% {\r\n    width: 0;\r\n    right: 100%;\r\n  }\r\n}\r\n\r\n@keyframes revealLTR {\r\n  0%{\r\n    width: 0;\r\n    left: 0;\r\n  }\r\n  65%{\r\n    width: 100%;\r\n    left: 0;\r\n  }\r\n  100% {\r\n    width: 0;\r\n    left: 100%;\r\n  }\r\n}\r\n\r\n\r\n\r\n\r\n@keyframes textHidden {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(document).ready(function() {\r\n  $('.has-animation').each(function(index) {\r\n    $(this).delay($(this).data('delay')).queue(function(){\r\n      $(this).addClass('animate-in');\r\n    });\r\n  });\r\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Reveal animation is an elegant and modern effect which <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-css-reveal-animation-text-and-image\/\" title=\"CSS Tutorial &#8211; CSS Reveal Animation Text and Image\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3826,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,20],"tags":[268,322,197,103,227],"newstopic":[],"class_list":{"0":"post-3375","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-javascript","9":"tag-css-grid","10":"tag-css-reveal-animation-text-and-image","11":"tag-css-tutorial","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3375"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3375\/revisions"}],"predecessor-version":[{"id":3377,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3375\/revisions\/3377"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3826"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3375"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}